How to fade out div slowly, update content, and then fade in div slowly, using jQuery?

I have a div I want to fade out, update its content, and then fade back in. So far I have tried:

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>");
    $('#myDivID').fadeIn('slow');
});

What happens is that the fade out completes and calls the anonymous callback. So far, so good.

The div's content is replaced correctly, but the fadeIn() effect is immediate — no smooth transition, just a quick, snappy jump to the updated div.

Is there a better way to accomplish this? Thanks for your advice.

15
задан Alex Reynolds 4 May 2011 в 07:20
поделиться