.children() 和 .fadeOut() 的 jquery 问题答案

【问题标题】：jquery problem with .children() and .fadeOut().children() 和 .fadeOut() 的 jquery 问题
【发布时间】：2011-08-09 04:53:56
【问题描述】：

我想获取 div 的所有子项，将它们淡出，然后在 div 中插入一些文本。我在fadeOut() 中使用了一个回调函数，所以动画很流畅：

var foo = $(this).parents('.foo').eq(0);
foo.children().fadeOut(300,function() {
  foo.prepend('some text');
});

问题是，fadeOut 似乎是按顺序对每个子级触发，而不是一次全部触发 - 有三个子级，因此回调函数会为每个子级触发，从而导致三个插入文本的实例。我可以将所有子项包装在一个 div 中并使其淡出，但如果可以的话，我想避免添加更多标记。还有其他方法吗？

【问题讨论】：

标签： jquery

【解决方案1】：

试试这个代码：

var foo = $(this).parents('.foo').eq(0);
foo.fadeOut(300,function() {//fade out foo
  foo
     .children().hide().end()//set display none to foo's children
     .prepend('some text').show();//prepend text to foo and show it (but children have display none)
});

【讨论】：

【解决方案2】：

删除children() 并直接在foo 上调用它。

或者，在回调中...

function() {
   if ($(this).siblings(':animated').length) {
      return;
   }
   // What you need to do once only :)
}

jsFiddle.

【讨论】：