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

You should do it this way (this works, is tested code):

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

Your code wasn't working because the new created div is instantly visible. Another solution is to add a display:none like the following:

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

Hope this helps Cheers