Question

I’m trying to implement an image slider that displays some text on hover. It’s working fine except in IE8 where there is a flash of text everytime the slider changes images.

Here’s the current js code:

<script type="text/javascript">
$(document).ready(function() {
    /* Hide descriptions. */
    $('.description').fadeTo(0, 0);

    /* Show descriptions on hover. */
    $('.description').hover(
    function() { $(this).fadeTo(400, 1); },
    function() { $(this).fadeTo(400, 0); }
    );

    $('#slider').after('<div id="pager">').cycle({
    fx: 'fade',
    timeout: 5000,
    speed: 700,
    pager: '#pager',
    pause: 1
    })
});
</script>

A link to a live example here

A Link to jsFiddle

Answer 1

It seems to work if you force the description to hide during the transition:

$(document).ready(function() {
    /* Hide descriptions. */
    $('.description').fadeTo(0, 0);

    /* Show descriptions on hover. */
    $('.description').hover(
        function() { $(this).fadeTo(400, 1); },
        function() { $(this).fadeTo(400, 0); }
    );

    $('#slider').after('<div id="pager">').cycle({
    fx: 'fade',
    timeout: 5000,
    speed: 700,
    pager: '#pager',
    pause: 1,
    cleartypeNoBg: true,
    before: function() { $('.description').css('display', 'none'); },
    after: function() { $('.description').css('display', 'block'); }
    });
});