JQuery fadeOut fadeIn problems when changing the selected element

I am attempting to fade out the contents of a container, then replace with some new html and fade them back in. *Note: The container will always contain at least one child div

Here is my code:

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

I have tried a few different methods, and no luck. The new elements appear, but without the sought after fade effect.

the one i posted seemed to be the clearest.. the rest were long shots at best

I assume that this probably isn't the c开发者_StackOverfloworrect method to do such a task, however it is all I can think of. Any direction would be appreciated.

Cheers!

---

Try this :

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

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

   }).fadeIn(300);

Demo :

http://jsfiddle.net/hnVaF/

---

Try this

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