JQuery исчезают проблемы

Question

Я пытаюсь реализовать слайдер изображений, который отображает текст при наведении курсора. Работает нормально, кроме IE8, где каждый раз, когда слайдер меняет изображения, появляется вспышка текста.

Вот текущий код js:

<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>

Ссылка на живой пример здесь

Ссылка на jsFiddle

Answer 1

Кажется, работает, если вы заставляете описание скрываться во время перехода:

$(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'); }
    });
});