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

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

干杯！

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

})();

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

3 个答案:

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