Search code examples
jqueryfadeinfadeout

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 correct method to do such a task, however it is all I can think of. Any direction would be appreciated.

Cheers!

Solution

  • Try this

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