循环功能后在最后一个列表项上停止

Question

我有一个有序列表，每个列表项都会循环显示一次。淡入，然后在淡出之前延迟一段时间，并以相同的方式显示下一个列表项。这一切正常，但是当到达最后一个列表项时，它会返回开始并以连续循环运行。代码如下：

$(function() {
      var item = $('.test li').hide(),
          i = 0;
      (function cycle() {
          item.eq(i).fadeIn(400).delay(2000).fadeOut(200, cycle);
          i = ++i % item.length;
      })();
  });

我在item.eq(i).fadeIn(400) 行上方添加了if (i==10){return;}，它阻止了列表项循环，但最后一个列表项没有显示，可能是因为它淡出。如何阻止最后一项不显示。所以它会淡入，然后动画就结束了？

干杯！

Answer 1

试试这个：

$(function() { 

var item = $('.test li').hide(),
i = 0;

(function cycle() {
    if(i==item.length-1){
        item.eq(i).fadeIn(400);
        return;
    }
    item.eq(i).fadeIn(400)
              .delay(2000)
              .fadeOut(200, cycle);
    i = ++i % item.length;
})();

});

让我知道这是否有效。

Answer 2

只是让它只在i == 10时淡入然后返回？

(function cycle() {
    if (i == 10)
    {
        item.eq(i).fadeIn(400);
        return;
    }

    item.eq(i).fadeIn(400)
              .delay(2000)
              .fadeOut(200, cycle);

    i = ++i % item.length;
})();

Answer 3

类似这样的：

var item = $('.test li').hide(),
    i = 0;

(function cycle() {

    var curr = item.eq(i).fadeIn(400);

    if (i != item.length - 1) {
        curr.delay(2000).fadeOut(200, cycle);
        i = ++i % item.length;
    }

})();

演示：http://jsfiddle.net/62zm9sa9/