CODEWITHSUNDEEP
jquery
Teifion
Teifion

Reputation: 110959

jQuery fading in and out

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 :)

Upvotes: 2

Views: 1297

Answers (1)

Ben
Ben

Reputation: 226

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

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

That should do it.

Upvotes: 8

Related Questions