jquery problem with .children() and .fadeOut()

I want to get all the children of开发者_开发问答 a div, fade them out, and then insert some text in the div. I'm using a callback function in fadeOut() so the animation is smooth:

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

Problem is that fadeOut seems to be firing on each of the children in sequence, rather than all at once - there are three children, so the callback function fires for each of them, resulting in three instances of the inserted text. I could just wrap all the children in a div and fade that out, but I'd like to avoid adding more markup if I can. Is there another way?

Try this code:

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

Remove the children() and call it on foo directly.

Alternatively, in the callback...

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

jsFiddle.