How to make multiple jQuery animations run at the same time?

jquery, jquery-animate

Solution

Using `queue:false`. You can see the full docshere.

$(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, options ) version added: 1.0

properties A map of CSS properties that the animation will move toward. options A map of additional options to pass to the method. Supported keys: `duration:` A string or number determining how long the animation will run. `easing:` A string indicating which easing function to use for the transition. `complete:` A function to call once the animation is complete. `step:` A function to be called after each step of the animation. `queue:` A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of 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:` A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

Problem

As it stands there us a difference between the two and I want them to run at the same time. Here is the code: ``` $(selector1).animate({ height: '670' }, 2000, function() { // Animation complete. }); $(selector2).animate({ top: '670' }, 2000, function() { // Animation complete. });​ ```

Original source