[javascript] 2つのjQueryアニメーションを同時に実行するには?



Answers

それは同時に実行されます。 同じ要素に対して2つのアニメーションを同時に実行したい場合はどうすればよいでしょうか?

$(function () {
    $('#first').animate({ width: '200px' }, 200);
    $('#first').animate({ marginTop: '50px' }, 200);
});

これで、アニメーションのキューイングが終了します。 それらを同時に実行するには、1行だけを使用します。

$(function () {
    $('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});

同じ要素に対して2つの異なるアニメーションを同時に実行する方法はありますか?

Question

2つの異なる要素で2つのアニメーションを同時に実行することは可能ですか? 私は、この質問とは逆のJquery queuing animationsが必要です。

私はこのようなことをする必要がある...

$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);

同時に2つを実行することができます。 私が考え得る唯一のことは、各アニメーションに対してsetTimeout一度使用することですが、それが最良の解決策ではないと私は思います。




アニメーションを連続して呼び出すと、同時に実行されている外観が得られることは事実ですが、根底にある真実は、並行して動作する別個のアニメーションです。

アニメーションが実際に同時に実行されていることを保証するには、次のようにします。

$(function() {
    $('#first').animate({..., queue: 'my-animation'});
    $('#second').animate({..., queue: 'my-animation'}).dequeue('my-animation');
});

さらにアニメーションを 'my-animation'キューに追加することができ、最後のアニメーションデキューを終了してすべてのアニメーションを開始することができます。

アンサー、乾杯




私はjQueryのドキュメントで解決策を見つけたと信じています:

すべての段落を左のスタイル50および不透明度1(不透明、可視)にアニメーション化し、500ミリ秒以内にアニメーションを完成させます。 それはキューの外側でも行います。つまり、そのターンを待たずに自動的に開始します

$( "p" ).animate({
  left: "50px", opacity: 1
}, { duration: 500, queue: false }); 

単純に: queue: false追加しqueue: false




Related