在動畫回調完成之前觸發一個jQuery循環來迭代？

我想做一個順序動畫，一個循環遍歷元素列表.post's並慢慢淡化它們。困難的部分在於讓下一次迭代在最後一次衰落完成之前開始消失。到目前爲止，我所擁有的只是一個簡單的連續動畫製作器，它們可以一個接一個地淡化它們。在動畫回調完成之前觸發一個jQuery循環來迭代？

$(".post").hide(); 
var posts = $(".post"), 
    i = 0; 
(function() { 
    $(posts[i++]).fadeIn('slow', arguments.callee); 
})();

有誰知道我怎麼可能改變以往ELEM/S已經完成了在此之前，讓.post到淡入（）？

來源

2010-07-31 Trip

使用each()對它們進行迭代，併爲每一個使用setTimeout()，將動畫的持續時間乘以當前的index。

var posts = $(".post").hide(); 

    // Holds reference to the index of the current iteration 
    // ------------------v 
posts.each(function(index) { 
    var $th = $(this); 
    setTimeout(function() { 
     $th.fadeIn('slow'); // Removed arguments.callee 
    }, index * 300); 
});

因此，每個setTimeout()將有n*600的持續時間，這應該給你你想要的效果。

順便說一句，如果你不需要posts變量用於任何其他目的，您可以在.hide()後消除它和鏈.each()，如$(".post").hide().each(func...)

編輯：我有一個錯誤。我在setTimeout()裏面使用this，它有不同的值。編輯傳遞正確的值。

編輯：錯讀了這個問題。將setTimeout()的持續時間更改爲300，以在動畫中給出部分重疊。

來源

2010-07-31 15:05:29 user113716

原諒我daftness的持續時間的持續時間。我沒有例外與jQuery。但是這會返回'太多的遞歸'。我不確定哪裏可以開始解密如何 – Trip 2010-07-31 15:15:52

@Trip - 不知道爲什麼你會這樣做，但看到我的更新。我在代碼中有錯誤。 – user113716 2010-07-31 15:18:03

@Trip - 另外，如果有更多的代碼比你的問題中顯示的更多，請確保你不在循環中。我不確定'arguments.callee'的目的是什麼。你可能想要刪除它。 – user113716 2010-07-31 15:22:59

帕特里克的解決方案類似，但在我看來

(function() { 
    $(".post").hide().each(function(index){ 
    $(this).delay(index * 300).fadeIn('slow'); 
    }); 
})();

demo乾淨了一點，在300是延遲，其中作爲'slow'是淡出

來源

2010-07-31 15:14:24 Ties

啊，但那與我已有的那個沒有什麼不同。 – Trip 2010-07-31 15:17:16

呵呵？你什麼意思？ – Ties 2010-07-31 15:21:49

啊，是的，它確實工作，我意識到，改變參數後，使其更明顯的補間。 – Trip 2010-07-31 15:30:14

在動畫回調完成之前觸發一個jQuery循環來迭代？

回答

相關問題