How to start one jQuery animation only after another is totally complete

Question

I have a couple situations where I need to animate an element, say either moving it to the left, or fading it in, but only after an initial animation is 100% complete.

So like, say I have a search drawer that slides out from the top of the page when you click a search icon. Thats easy right:

$('.search-toggle').on('click', function(){ $('.search-drawer').slideToggle(); // or fadeIn(), show() ect.. });

But what if like, I click on a search toggle at the BOTTOM of a page, and I need my page to scroll up to the top BEFORE displaying the search drawer? I tried something like this:

$('.search-toggle').on('click', function(){ $('html, body').animate({ scrollTop: 0 }, "slow").find('.search-drawer').slideToggle(); // or fadeIn(), show() ect.. });

but the two animations run at the same time. I've tried using delay but that doesn't seem to work and would likely cause a noticeable delay when the top link is click as opposed to the bottom.

That said, I'm also trying to run an animation where when you click on an element, I want it to move to the left by like 330px and then, AFTER it's reached that position, another element would slide in Or I would have the second element slide in first and THEN the first element would do something. The point is, how do I get the animated to finished before beginning another one.

So for my second example, I see that the animate callback doesnt really work. I have this for another animation:

 $first.animate( { left : "-=660" }, 300, function(){ $second.animate({ left: '-='+startPosition }); } }

So in this example, in theory first $first would move left 660 pixels and THEN $second would move left X amount right? It doesnt, they look like the move at the same time. Or rather, $second starts animating before $first.

use callback function of animate method, check the DOC. And fix all the typos in your post... — A. Wolff
– A. Wolff, Commented Aug 8, 2013 at 18:10

putvande · Accepted Answer · 2013-08-08 18:23:23Z

5

You need to change your function so it will wait for the first animation to complete:

$('.search-toggle').on('click', function(){ $("body").animate({ scrollTop: 0 }, "slow", function(){ $('.search-drawer').slideToggle(); // or fadeIn(), show() ect.. }); });

edited Aug 8, 2013 at 18:23

answered Aug 8, 2013 at 18:11

putvande

15.3k3 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

A. Wolff Over a year ago

need to fight to fix OP typos... ;)

rugbert Over a year ago

Thanks, That seems to cause the slideToggle() to fire twice though. My page will scroll up and the drawer will open but it closes immediately.

putvande Over a year ago

That is because you were animating both html and body. I have updated my question.

rugbert Over a year ago

So while the callback worked for the first example, it doesnt for the second example. I edited my question to include some sample code. And thanks, you two!

Collectives™ on Stack Overflow

How to start one jQuery animation only after another is totally complete

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related