0

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

  1. 一个一个地淡入容器 div 的所有子元素，直到所有元素都可见。
  2. 延迟，然后一次性淡出容器 div 中的所有元素。
  3. 移动到下一个容器 div 并对那里的子元素执行相同的操作......等等。
  4. 环形。

到目前为止，我仍然停留在第 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);
});
4

2 回答 2

0

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

这是您的动画的全部代码。

玩得开心。

于 2012-10-24T20:50:41.763 回答
0

对于第 1 步：您应该在 div 的第一个子元素和传递给 fad​​eIn 的完整回调函数中淡入淡出，获取元素的下一个兄弟元素并将其淡入，直到没有更多的下一个兄弟元素。像这样的东西（伪代码）：

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/

于 2012-10-24T20:00:45.677 回答