淡出报价器错误

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)并返回到我的标签页时，“li”键切换得很疯狂。

为什么呢？(

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。我确实在Chrome中看到了这个行为。这太奇怪了。这几乎就像是所有的事件都在排队等待，直到你返回页面。真奇怪。

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