Fadeout + clear div and then add new content to

Question

What is a good way to smooth out div content , but so that the div is ready for new content?

FROM

$('#info').html('').fadeOut(500); or $('#info').fadeOut(500).html('').show(); 

The content of the div just disappears, and the new content does not show

FROM

  $('#info').fadeOut(500); 

Div disappears, as it should be, but any new content does not show

Answer 1

 $('#info').fadeOut(500, function() { $(this).empty().show(); }); 

Answer 2

 $('#info').fadeOut(500, function() { $(this).html('').show(); }); 

Wait until the div disappears before emulating it!

Answer 3

Use fadeOut callback:

 $('#info').fadeOut(500, function() { $('#info').html("New Content").show(); });