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.