Question

$('li.cont').each(function(i) {
    $(this).delay((i + 1) * 3000).fadeOut(1500);

我想添加检查所有li.cont是否已经迭代完毕的功能，如果是，请重新开始。与最终项目淡出的当前功能相反，然后该区域仅为空白。

Answer 1

我建议使用fadeOut的回调参数，在一个动画结束时调用它。在那里你将以循环方式开始下一个。一旦再次获得第一个，您只需恢复情况并显示所有元素。

＆＃13;

var $items = $('li.cont');
(function loop(i) {
    if (!i) $items.show(); // starting from scratch: show all
    $items.eq(i).fadeToggle(1500, loop.bind(null, (i+1)%$items.length));
})(0);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="cont">A</li>
<li class="cont">B</li>
<li class="cont">C</li>
</ul>

＆＃13;

我实际上使用了fadeToggle，它归结为同样的事情，除了它允许我演示另一个变体。在隐藏了所有元素之后，这个不重置情况，因此切换将开始淡化每个项目而不是淡出。然后，当完成时，再次反转衰落方向：

＆＃13;

var $items = $('li.cont');
(function loop(i) {
    $items.eq(i).fadeToggle(1500, loop.bind(null, (i+1)%$items.length));
})(0);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="cont">A</li>
<li class="cont">B</li>
<li class="cont">C</li>
</ul>

＆＃13;

Answer 2

您是否尝试制作对象的副本并将其添加到辅助阵列然后返回？我在制作幻灯片时用角度来做这件事。我从数组的末尾开始，然后以0的方式工作。

var a = [];
var b = [];

function changeIn(){
     var l = a.length
     if(a.length === 0)
     {
          angular.copy(b, a);
     }

     // do stuff here
     var x = []
     angular.copy(a[l], x);
     b.push(x);
     if (l > -1) {
         array.splice(l, 1);
     }
};

或者您可以使用array.pop（）或array.shift（）来获取最后一个或第一个项的值，并将其从列表中删除。我在这个例子中展示的代码绝对是执行此操作的最长方式。在Stack上有很多例子可以更有效地执行此操作，具体取决于您希望如何编写代码。

这里有一个非常好的样本：

Javascript: move objects from one array to another: Best approach?

每个函数检查是否遍历所有项目然后重新开始

2 个答案: