帮助jQuery回调

根据my previous question，我有一个工作动画，淡入和淡出div slideshow内的每个元素。问题是，我希望这个动画一旦到达最后一个元素就从头开始继续。我觉得这很容易，我只是在我的JQuery函数中放置一个无限循环，但由于某种原因，如果我插入一个无限循环，没有动画显示和页面挂起。我也找不到有关如何正确放置回调的文档中的任何内容。我怎样才能让这段代码重新开始动画，一旦它完成迭代每个对象，为什么是一个无限循环不正确的方式去做这件事？帮助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>

来源

2010-09-06 Oren Hizkiya

你可以做这样的事情：

$(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是元素的数量。

来源

2010-09-06 15:04:19

@Oren - woops，那第二个延迟不应该相乘，尝试更新的答案。 – 2010-09-06 15:15:33

现在都在工作。非常好，谢谢。 – 2010-09-06 15:18:07

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

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

来源

2010-09-06 21:52:46 pepkin88

帮助jQuery回调

回答

相关问题