Cycle.js IE7/8 clicking pager causes it to blink, not fade
I'm using Cycle.js for a project. I have created a static navigation area and using the pager: in Cycle allow the user to click which slide to see. Everything looks fine in all major browsers, FF, Safari, Chrome, IE9 etc. However in IE 7 and 8 it doesn't fade as expected. It blinks to white, then the next slide blinks into view. I'm mystified as to why that is.
If I remove the paging altogether and put in a timout of 3000 for example it fades just fine. Is something wrong with the pager? I basically just used it straight from the Cycle.js project site example (except modified the index value as commented below) seen here.
jQuery(function($){
$('.Slides').cycle({
fx: 'fade',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function(idx,slide){
idx -= 1 // we don't want the first slide so reduce the index # by 1
return '#nav div:eq(' + idx + ') ';
}
});
The HTML looks pretty straight forward, something like this:
<div id="nav">
<div id="stage_1"></开发者_如何学编程div>
<div id="stage_2"></div>
<div id="stage_3"></div>
</div>
This mark up will be changing soon, but don't see how that could be related to the issue at hand right now.
Any ideas? Thanks.
I figured out what my error was. The HTML containing the slides featured a container and two other elements, img and a. Pretty simple stuff:
<div class="slide">
<img src="path_to_my_img" />
<a href="path_to_another_page">Link Text</a>
</div>
And the transition was just causing a blink, and the next slide would appear after a moment of showing white only. No transition would work (fade, turnDown, etc). To fix this I just had to add a background color to the container div, which I did in an IE conditional. For me this works out since the img is the same size as the div and the anchor is absolutely positioned.
精彩评论