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 ti

Answer 1

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();
});

Answer 2

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 3

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.