jQuery animations - when is asynchronous and when it's not?

Question

I have two divs which I want to animate:

<div id="character">
  <div id="sprite"></div>
</div>

And I'm calling animate in jQuery like this:

$("#sprite").animate({"width" : "1", }, 400 );
$("#character").animate({"width" : "1", }, 400 );
$("#character").animate({"margin-left" : "0", }, 400 );

However it seems that the first two animations execute simultaneusly while the third only starts when the others have finished.

Why is asynchronous in the first two but not with the third? How can I make the three of them run at the same time?

Can you throw it all into a jsFiddle with the rest of the CSS? — Sparky
– Sparky, Commented Nov 9, 2011 at 21:46

JaanRaadik · Accepted Answer · 2015-12-14 02:43:03Z

10

the second $("#character").animate gets queued. If you have 2 $("#character") the second only happens when the first is complete. What you could do is:

$("#character").animate({"margin-left" : "0", "width" : "1", }, 400 );

to make both animations happen at the same time, or:

$("#character").animate({"width" : "1"}, {"duration":400, "queue": false});
$("#character").animate({"margin-left" : "0"}, {"duration":400, "queue": false});

edited Dec 14, 2015 at 2:43

JaanRaadik

5713 silver badges11 bronze badges

answered Nov 9, 2011 at 21:41

samura

4,4051 gold badge23 silver badges27 bronze badges

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

Comments

topek · Accepted Answer · 2011-11-09 21:44:06Z

4

Try:

$("#sprite").animate({"width" : "1", }, 400 );
$("#character").animate({"width" : "1", }, 400 );
$("#character").animate({"margin-left" : "0", }, {duration:400, queue:false} );

Otherwise jQuery will queue the animations, see the docs for animate

answered Nov 9, 2011 at 21:44

topek

19k3 gold badges38 silver badges43 bronze badges

Comments

James Montagne · Accepted Answer · 2011-11-09 21:44:01Z

2

animate has an optional queue option which tells the animation whether or not to get added to the queue. If the animation is not queued, it will run immediately. Each element has its own queue, so $("#sprite") and $("#character") each have a separate animation queue.

If you want everything to just run immediately, use the queue option. If you need everything to be queued to the same queue, you will need to create your own queue. http://api.jquery.com/queue/

answered Nov 9, 2011 at 21:44

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

1 Comment

James Montagne Over a year ago

For an example of a custom animation queue, you can see this question stackoverflow.com/questions/5965371/…

Collectives™ on Stack Overflow

jQuery animations - when is asynchronous and when it's not?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related