How do I make fadeOut blocking in JQuery?

Question

Pretty much as the question says, I have some code running on an interval:

$("#blah").fadeOut(2000);
$("#blah2").fadeIn(2000);

I'd like to fadeOut, then fadeIn, rather than have both going simultaneously. Is there an easy way?

Answer 1

You need to make use of the callback functionality to ensure, that the animation completes before calling another. Looks like:

$('#blah').fadeOut(2000, function(){
    $('#blah2').fadeIn(2000);
});

see. .fadeOut()

Answer 2

$('#blah').fadeOut(2000, function(){
    $("#blah2").fadeIn(2000);
});

As explained in the documentation:

.fadeOut( [ duration ], [ callback ] )

duration: A string or number determining how long the animation will run.

callback: A function to call once the animation is complete.

Answer 3

$("#blah").fadeOut(2000);
$("#blah2").delay(2000).fadeIn(2000);

Or:

$("#blah").fadeOut(2000, function(){
    $("#blah2").fadeIn(2000);
});