jQuery queue events

Question

So what I want to do is to coordinate some effects using jQuery for some AJAX calls that I'm working with. My problem is that the fadeIn for the second div fires at the same time with the fadeOut for the first div.

This could apply to other events as well so I'm curious, is there any way to make fadeId launch ONLY after fadeOut is done ?

jQuery("#div1").fadeOut("slow"); 
jQuery("#div2").fadeIn("slow");

Thanks

Answer 1

You can do this by using a callback. Check out the jQuery docs.

jQuery("#div1").fadeOut("slow", function() { jQuery(this).fadeIn('slow'); });

Pretty much all of the jQuery effects take a callback to execute after the effect is over.

Answer 2

That's usually good enough for a quick animation but if you want to queue up a number of effects, you can also utilize the queue() and dequeue() methods like this:

$("#div1").fadeOut;
$("#div1").queue(function()
{
   $(this).fadeIn();
   $(this).dequeue();
}
$("#div").queue(function() 
{
   $(this).html("And now I'm sliding up. Wee!");
   $(this).slideUp("slow");
   $(this).dequeue()
}

Here, queue() adds a function to the object's queue (which doesn't have to be an animation) and dequeue() executes that function.

See the docs for more information.

Answer 3

There were some typos in the above example which prevented it from working in Firefox, the corrected version:

$("#div1").fadeOut();
$("#div1").queue(function()
{
   $(this).fadeIn();
   $(this).dequeue();
});
$("#div").queue(function() 
{
   $(this).html("And now I'm sliding up. Wee!");
   $(this).slideUp("slow");
   $(this).dequeue();
});