7

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

Brayn
  • 1,766
  • 10
  • 27
  • 33

3 Answers3

16

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.

Ed Bishop
  • 770
  • 8
  • 19
dmkc
  • 1,161
  • 1
  • 15
  • 22
13

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.

Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
  • In the question, the fadeIn was about a second div. Shouldn't your code have 'jQuery("#div2")' in the callback? – akauppi Dec 16 '09 at 04:42
  • Thanks! This helped me out. I was busy trying to figure out queue's when it was this simple! – David Yell May 13 '10 at 14:52
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();
});
zsiswick
  • 1
  • 1