Fadeout + empty a div, and then put new content in

Question

What is a good way to fadeout the content of a div, but keeping the div ready for new content?

With

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

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

With

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

The div fades as it should, but any new content does not show

Galvanize

Answer 1

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

Doiron

+1 for using empty() instead of html('') since that's what it's there for. – Zetes

What would be the method for setting content to a div and fading it in then? EDIT: Ah got it: $('#info').hide().html('new content').fadeIn(200); Is that the best way? – Galvanize

Yes, you don't need a callback when fading in! – Conjunctiva

Answer 2

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

Will wait until the div is faded out before emtying it!

Conjunctiva

Answer 3

Use fadeOut's callback:

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

Educative

You can use $(this) instead of finding the element again. :) – Synthetic