javascript - 帮助 JQuery 回调

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 .

不必跟上延迟，您可以将它乘以循环中的当前索引...因为第一个索引是0，第一个完全不会延迟，然后2200ms乘以后面的元素量，再循环一次。上面代码中d是延迟，所以很容易调整，c是元素的个数。