delay function not working right

Question

I have a tricky problem. When pushing on a button, the content of a div should fadeout, delay, change it to another content, fadein.

$('.content-area').fadeOut(500);
$('.content-area').delay(500).empty().append(creation).fadeIn(500);

But when it runs this code the content switch while its fading out then it delays, then its shown. Any solution?

Answer 1

you'll want to use the callback function.

$('.content-area').fadeOut(500, function(){
  $(this).empty().append(creation).fadeIn(500);
});

Just to be clear... a callback is called after the function completes. So in this case, after the fadeOut completes, then the other things happen.