3

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?

KyleMit
  • 30,350
  • 66
  • 462
  • 664
lisovaccaro
  • 32,502
  • 98
  • 258
  • 410

3 Answers3

8

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});
JaanRaadik
  • 571
  • 3
  • 11
samura
  • 4,375
  • 1
  • 19
  • 26
3

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

topek
  • 18,609
  • 3
  • 35
  • 43
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/

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • For an example of a custom animation queue, you can see this question http://stackoverflow.com/questions/5965371/single-queue-for-jquery-animate-elements/ – James Montagne Nov 09 '11 at 21:47