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?

Answer 1

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});