幫助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回調

回答

相關問題