How to make multiple jQuery animations at the same time?

Question

As he stands there, the difference between them and I want them to work at the same time. Here is the code:

$(selector1).animate({ height: '670' }, 2000, function() { // Animation complete. }); $(selector2).animate({ top: '670' }, 2000, function() { // Animation complete. });​ 

Answer 1

Using queue:false . Here you can see the full docs .

 $(selector1).animate({ height: '670' }, { duration: 2000, queue: false, complete: function() { /* Animation complete */ } }); $(selector2).animate({ top: '670' }, { duration: 2000, queue: false, complete: function() { /* Animation complete */ } }); 

Docs:

.animate (properties, parameters) version added: 1.0

---

properties The CSS property map to which the animation will move.
parameters Map of additional parameters for transition to the method. Supported keys:
duration: A string or number that determines how long the animation will take.
easing: A string indicating which easing function to use for the transition.
complete: Function to call after the animation is complete.
step: The function that will be called after each step of the animation.
queue: Boolean value indicating whether to place animation in the effect queue. If false, the animation will start immediately. Starting with jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.
specialEasing: Map of one or more CSS properties defined by the property argument and their corresponding weakening functions (added 1.4).

Answer 2

use the queue variable as false ...

 $(function () { $("selector1").animate({ height: '200px' }, { duration: 2000, queue: false }); $("selector2").animate({ height: '600px' }, { duration: 2000, queue: false }); }); 

Answer 3

You can create an expression for the selector that selects both options, see here for a working example: DEMO .

HTML

 <div id="blah">Blah</div> <div id="bleh">Bleh</div> <input type="button" id="btn" value="animate" />​ 

Javascript

 function anim() { $('#blah, #bleh').animate({ height: '670' }, 2000, function() { // Animation complete. }); } $(function(){ $('#btn').on('click', anim); });​ 

Answer 4

Although it is true that consecutive animation calls will give an appearance, they work at the same time, the basic truth is that they are different animations that work very close to parallel.

To ensure that the animation does work at the same time, use:

 $(function() { $('selector1').animate({..., queue: 'selector-animation'}); $('selector2').animate({..., queue: 'selector-animation'}).dequeue('selector-animation'); }); 

Further animations can be added to the selector-animation queue, and all of them can be triggered if the last animation cancels them.

Cheers, Anthony