如何動態完成一系列動畫後才觸發動畫

Question

我是一個完整的初學者。我試圖創建可以處理任何數量的元素的代碼，這取決於來自xml文件的信息。我試圖完成四個步驟。

1. 淡入一個容器div的所有子元素，一個接一個，直到所有元素都可見。
2. 延遲，然後一次淡出容器div中的所有元素。
3. 移至下一個容器div並對其中的子元素執行相同的操作......等等。
4. Loop。

到目前爲止，我還是停留在第1步。我可以讓子元素依次淡入，但它們都會淡入，而不管它們屬於哪個容器div。然後一切都消失了。直到我可以讓第一個容器div淡入所有元素，然後消失而沒有觸發任何其他元素，我不能繼續找出其餘的東西。我嘗試了很多不同的東西，但我不能完全達到目標，我不知道自己做錯了什麼。這是我到目前爲止的代碼：

$('.element').find('.inner').each(function(index){ 
    $(this).delay(2000*index).fadeIn(2000); 
}); 
$('.inner').promise().done(function() { 
// my callback 
    $('.element').delay(4000).fadeOut(2000); 
}); 

Answer 1

第1步： 你應該淡入的div的第一個孩子，並傳遞給淡入完整的回調函數獲得元素的下一個兄弟和淡化它，直到有沒有更多的下一個兄弟姐妹。事情是這樣的（僞代碼）：

var fadeInCallback = function(evt) { 
    //this will reference the object that fadeIn was called on 
    if($(this).next().size() > 0) { 
    $(this).next().fadeIn(2000, fadeInCallback); 
    } 
}; 
$('.element div:first-child').fadeIn(2000, fadeInCallback); 

見：http://api.jquery.com/first-child-selector/和http://api.jquery.com/next/

Answer 2

對於jQuery的定時問題和同步動畫有一個很酷的插件：jquery-timing。它提供了非常簡單的鏈接語法。以下示例代碼是單鏈：

// 1. Fade in all child elements of a container div, one by one until all elements are visible. 
// 2. Delay, and then fade out all elements in the container div at once. 
$('.someDiv .inner').each($).fadeIn(2000,$).all().wait(4000).fadeOut(2000); 

要回路行爲多個div還需要從該插件重複（）方法。同樣，我們有一個單一的jQuery鏈，做所有的等待都是自動動畫：

// Move on to the next container div and do the same with the child elements there...and so on. 
// Loop. 
$('.divs').repeat().each($).find('.inner') 
    .each($).fadeIn(2000,$).all().wait(4000).fadeOut(2000,$); 

這是你的動畫整個代碼。

玩得開心。