Question

我用这个：

JS

var aniSpd01 = 5000;

$(function() {
    var startIndex = 0;
    var endIndex = $('#trends li').length;
    $('ul#trends li:first').fadeIn(150);
    window.setInterval(function() {
        $('ul#trends li:eq(' + startIndex + ')').fadeOut(150);
        startIndex++;
        $('ul#trends li:eq(' + startIndex + ')').fadeIn(150);
        if (endIndex == startIndex) {
           startIndex = 0;
        }
   }, aniSpd01);
});

HTML

    <ul id="trends">
        <li><a href="#" title="">Lorem</a></li>
        <li><a href="#" title="">Ipsum</a></li>
        <li><a href="#" title="">Dolor</a></li>
    </ul>

CSS

ul#trends li {
position: absolute;
display: none;
}

但是当JS到达最后一个项目之后，有5秒的时间没有内容，那么它会回到第一个项目......

此外，当我切换标签（Chrome）并返回我的标签时，＆＃34; li＆＃34; s开关就像疯了一样。

为什么：（

Answer 1

好吧，我在Chrome中没有奇怪的行为。至于你的第一个问题，那是因为你的if语句发生在错误的地方。

你应该：

 $('ul#trends li:eq(' + startIndex + ')').fadeOut(150);
 startIndex++;
 if (endIndex == startIndex) {
         startIndex = 0;
 }
 $('ul#trends li:eq(' + startIndex + ')').fadeIn(150);

而不是你拥有的。你添加了淡入淡出后的if，这意味着你正在递增startIndex并试图淡入一个不存在的元素。

http://jsfiddle.net/

编辑：啊哈。在打完这个答案之后回到我的jsfiddle。我 DID 查看Chrome中的行为。那真是怪了。这几乎就像在你回到页面之前所有事件都排队了。奇怪的。

编辑2：有人提到此问题和可能的解决方法：Chrome timeout problem with animation

淡化自动收报机bug

1 个答案: