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>

指向实时示例here

的链接

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