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

Question

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() {
         


        

Answer 1

When you use replaceWith the content will be visible that is why there is no smooth transition.

First hiding the div and then calling fadeIn will give smooth transition.

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("
" + content + "
");
    $('#myDivID').fadeIn('slow');
});