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

Stop on last list-item after cycle function

本文关键字：列表 最后一个 循环 功能      更新时间：2023-09-26

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

$(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;}，这阻止了列表项循环，但最后一个列表项没有显示，可能是因为它淡出了。如何阻止最后一个项目不显示。所以它会逐渐消失，这将是动画的结束？

干杯！

试试这个：

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

让我知道这是否有效。

只让它在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;
})();

类似这样的东西：

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/

相关文章：