如何动态完成一系列动画后才触发动画

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,$); 

这是你的动画整个代码。

玩得开心。