Cycle.js IE7/8 clicking pager causes it to blink, not fade

Question

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.

Answer 1

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.