How can I fire a second jQuery animation only after my first jQuery animation has finished?

Question

I have this little animation activated by a link ($control1). When you click on that button the header goes down and the .area2 div show with a fadeIn effect.

Is there a way to wait until the header goes down and then show the .area2 with the fadeIn effect? With this code both animations run at the same time.

$(document).ready(function(){ $("#control1").toggle( function() { $("#header").animate({top:0}, 250); $(".area2").fadeIn(550);}, function() { $("#header").animate({top:-82}, 250);$(".area2").fadeOut(550);} ); });

Martin Jespersen · Accepted Answer · 2011-03-09 23:13:48Z

Use the complete callback function like this:

$(document).ready(function(){ $("#control1").toggle( function() { $("#header").animate({top:0}, 250, function() {$(".area2").fadeIn(550);}); }, function() { $("#header").animate({top:-82}, 250, function(){$(".area2").fadeOut(550);});} ); });

read the documentation here: http://api.jquery.com/animate/

Xyan Ewing · Accepted Answer · 2011-03-09 23:13:41Z

Sure, you should just be able to do this:

$(document).ready(function(){ $("#control1").toggle( function() { $("#header").animate({top:0}, 250, function () { $(".area2").fadeIn(550); }); }, function() { $("#header").animate({top:-82}, 250, function () { $(".area2").fadeOut(550); }); } ); });

Paul D. Waite · Accepted Answer · 2011-03-09 23:17:46Z

Yup: if you add a function as the last argument to your initial call to animate it’ll be fired when the animation has completed. You can put your second animation in this function:

$(document).ready(function(){ $("#control1").toggle( function() { $("#header").animate({top:0}, 250, function(){ $(".area2").fadeIn(550); }); }, function() { $("#header").animate({top:-82}, 250, function(){ $(".area2").fadeOut(550); }); } ); });

See http://api.jquery.com/animate/

Collectives™ on Stack Overflow

How can I fire a second jQuery animation only after my first jQuery animation has finished?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related