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

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

});

让我知道这是否有效。