Question

When I have some jquery code as follows:

$('#trash-talk-bubble').fadeOut().empty().append(trash_talk).fadeIn();

What I expect is the bubble to fade out, followed by the contents getting emptied and followed by the new content being added and then the bubble to fade back in.

Instead the bubble fades, and as it fades out the empty and append commands take place.. and then the fade in occurs.

Maybe I am misunderstanding how this works..

Answer 1

Should be like this

$('#trash-talk-bubble').fadeOut('slow', function() {
  $(this).empty().append(trash_talk).fadeIn();
});

this is because empty is called before fadeout is finished, now using this method empty append and fadein will be valled after fadeout is finished.