Question

根据my previous question，我有一个工作动画，它会淡入和淡出div slideshow中的每个元素。问题是我希望这个动画一旦到达最后一个元素就从头开始。我认为这很容易，我只是在我的JQuery函数中放置一个无限循环，但由于某种原因，如果我插入一个无限循环，没有动画显示和页面挂起。我也在文档中找不到关于如何正确放置回调的任何内容。一旦完成对每个对象的迭代，我怎么能从动画的开头重新启动这个代码？为什么无限循环不是正确的方法呢？

<div id="slideshow">
    <p>Text1</p>
    <p>Text2</p>
    <p>Test3</p>
    <p>Text4</p>
</div>

<script>
$(document).ready(function() {

var delay = 0;
$('#slideshow p').each(
    function (index, item)
    {
        $(this).delay(delay).fadeIn('slow').delay(800).fadeOut('slow');
        delay += 2200;
    }
);

});
</script>

Answer 1

你可以这样做：

$(function() {
  var d = 2200;
  function loopMe() {
    var c = $('#slideshow p').each(function (i) {
              $(this).delay(d*i).fadeIn('slow').delay(800).fadeOut('slow');
            }).length;
    setTimeout(loopMe, c * d);
  }
  loopMe();
});

You can give it a try here

不是跟上delay，而是可以通过循环中的当前索引将其复数...因为第一个索引是0，所以第一个索引不会延迟所有，然后2200ms倍的元素数量，再次循环。在上面的代码中d是延迟，所以它很容易调整，c是元素的数量。

Answer 2

此解决方案在我看来更优雅，更自然，更容易控制，正确编辑延迟等值。我希望你会喜欢它。

$(document).ready(function () {
    var elementsList = $('#slideshow p');
    function animationFactory(i) {
        var element = $(elementsList[i % elementsList.length]);
        return function () {
            element.delay(200).fadeIn('slow').delay(800).fadeOut('slow', animationFactory(i + 1));
        };
    }
    animationFactory(0)();
});

帮助JQuery回调

2 个答案: