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

问题

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

回答1:

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).

回答2:

use queue variable as false...

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

回答3:

While it's true that consecutive calls to animate will give the appearance they are running at the same time, the underlying truth is they're distinct animations running very close to parallel.

To insure the animations are indeed running 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 can be initiated provided the last animation dequeue's them.

Cheers, Anthony

回答4:

You can create a selector expression that will select both elments, 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);
});

来源：https://stackoverflow.com/questions/13088262/how-to-make-multiple-jquery-animations-run-at-the-same-time

标签

jquery

jquery-animate