jquery - 複数のjQueryアニメーションを同時に実行するにはどうすればよいですか？

Question

現状では、2つの違いがあり、同時に実行してほしいと思います。コードは次のとおりです。

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

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

Answer 1

を使用しqueue:falseます。あなたはここで完全なドキュメントを見ることができます。

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

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

ドキュメント：

.animate（プロパティ、オプション） バージョンが追加されました：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).

Answer 2

use queue variable as false...

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

Answer 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

Answer 4

両方の要素を選択するセレクター式を作成できます。実際の例については、ここを参照してください：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);
});​