Блог

Я хочу получить все дочерние элементы div, убрать их, а затем вставить некоторый текст в div. Я использую функцию обратного вызова в fadeOut (), поэтому анимация получается плавной:

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

Проблема в том, что fadeOut, похоже, запускается для каждого из дочерних элементов последовательно, а не для всех сразу — дочерних элементов три, поэтому функция обратного вызова запускается для каждого из них, в результате чего получается три экземпляра вставленного текста. Я мог бы просто обернуть всех дочерних элементов в div и убрать это, но я бы хотел избежать добавления дополнительной разметки, если смогу. Есть ли другой способ?

Попробуйте этот код:

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

Удалите children() и вызовите его foo напрямую.

В качестве альтернативы, при обратном вызове…

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

jsFiddle.