Question

我是一个完全的初学者。我正在尝试创建代码，可以根据xml文件中的信息处理动画任意数量的元素。我正在努力完成四个步骤。

逐个淡入容器div的所有子元素，直到所有元素都可见。
延迟，然后立即淡出容器div中的所有元素。
转到下一个容器div并对那里的子元素执行相同操作......依此类推。
循环。

到目前为止，我仍然坚持第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的第一个子节点并在传递给fadeIn的完整回调函数中获取元素的下一个兄弟并将其淡入，直到没有更多的下一个兄弟节点。像这样的东西（伪代码）：

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循环该行为，您还需要该插件的repeat（）方法。我们再次拥有一个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,$);

这是动画的完整代码。

玩得开心。

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

2 个答案: