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

score 22 · Accepted Answer · answered May 10 '12 at 23:23

22

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

answered May 10 '12 at 23:23

Hadi Mostafapour

7

+1 for using `empty()` instead of `html('')` since that's what it's there for. – Madbreaks May 10 '12 at 23:25
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? – mowgli May 10 '12 at 23:35
Yes, you don't need a callback when fading in! – adeneo May 10 '12 at 23:47

score 6 · Answer 2 · answered May 10 '12 at 23:17

6

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

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

answered May 10 '12 at 23:17

adeneo

score 2 · Answer 3 · answered May 10 '12 at 23:16

2

Use fadeOut's callback:

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

answered May 10 '12 at 23:16

Erik Petersen

1

You can use `$(this)` instead of finding the element again. :) – Only Bolivian Here May 10 '12 at 23:19

3 Answers3