JQuery fadeOut fadeIn проблемы при изменении выбранного элемента

Question

Я пытаюсь потушить содержимое контейнера, затем заменить его новым html и вернуть его обратно. * Примечание: контейнер всегда будет содержать хотя бы одного дочернего элемента div

Вот мой код:

$("#identifier div:first").fadeOut(300,function(){
  $(this).parent().html("<div> some new element </div>");
}).fadeIn(300);

Я пробовал несколько разных методов, но не повезло.Появляются новые элементы, но без искомого эффекта затухания.

тот, который я разместил, казался самым ярким ... остальные были в лучшем случае длинными кадрами

IПредположим, что это, вероятно, не правильный метод для выполнения такой задачи, однако это все, что я могу придумать.Любое направление будет оценено.

Ура!

Answer 1

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

   $('#identifier').children().first().fadeOut(300,function(){

       $(this).html("Some new element");

   }).fadeIn(300);

Демо:

http://jsfiddle.net/hnVaF/

Answer 2

Попробуйте это

$("#identifier div:first").fadeOut(300,function(){
  $(this).parent().html("<div> some new element </div>")
  $(this).fadeIn(300);
});