jquery .children()和.fadeout()的问题

Question

我想获得div的所有子元素，淡出它们，然后在div中插入一些文本。我在fadeOut()中使用回调函数，因此动画是平滑的:

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

问题是，fadeOut似乎按顺序在每个子元素上触发，而不是一次触发所有子元素—有三个子元素，因此回调函数为每个子元素触发，导致插入文本的三个实例。我可以将所有子元素都包装在一个div中，然后淡出，但我希望尽可能避免添加更多标记。还有别的办法吗?

Answer 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)
});

Answer 2

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

或者，在回调中…

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

jsFiddle .