jQuery fading in and out

Question

I have three divs: A, B and C. A is currently visible and I wish for B to replace it. I could easily do this with the following:

$('#A').hide();
$('#B').show();

However, that will cause the change to be quite abrupt. If I however I swap "hide" for "fadeOut" and "show" for "fadeIn" then A is still fading out while B is still fading in and it looks pretty confusing. How can I make B wait for A to be faded out before it starts to fade in?

Thanks in advance :)

Answer 1

fadeOut can take a callback function that runs after the first effect is completed:

$('#A').fadeOut( function() {
             $('#B').fadeIn();
           });

That should do it.

Answer 2

Great post