2つのjQueryアニメーションを同時に実行する方法は？

2つの異なる要素で2つのアニメーションを同時に実行することはできますか？この質問の反対の質問が必要ですJqueryキューイングアニメーション。

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

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

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

はいあります！

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });

    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});

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

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

これにより、アニメーションがキューに入れられます。それらを同時に実行するには、1行だけを使用します。

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

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

私はjQueryドキュメントで解決策を見つけたと思います：

すべての段落を50の左スタイルと1の不透明度（不透明、表示）にアニメーション化し、500ミリ秒以内にアニメーションを完了します。また、キューの外でも実行されます。つまり、順番を待たずに自動的に開始されます。

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

単純に追加しますqueue: false。

上記をそのまま実行すると、同時に実行されているように見えます。

ここにいくつかのテストコードがあります：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
    $('#first').animate({ width: 200 }, 200);
    $('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>

animateを連続して呼び出すと、それらが同時に実行されているように見えることは事実ですが、根本的な真実は、それらが非常に並行して実行される別個のアニメーションであることです。

アニメーションが実際に同時に実行されていることを確認するには、次のコマンドを使用します。

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

「my-animation」キューにさらにアニメーションを追加でき、最後のアニメーションがそれらをデキューすることを条件に、すべてを開始できます。

乾杯、アンソニー

オブジェクトの値のアニメーション化については、この素晴らしいブログ投稿を参照してください。値を使用して、好きなものを100％同時にアニメーション化できます。

http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/

スライドイン/スライドアウトに次のように使用しました。

        slide : function(id, prop, from, to) {
            if (from < to) {
                // Sliding out
                var fromvals = { add: from, subtract: 0 };
                var tovals = { add: to, subtract: 0 };
            } else {
                // Sliding back in
                var fromvals = { add: from, subtract: to };
                var tovals = { add: from, subtract: from };
            }

            $(fromvals).animate(tovals, {
                duration: 200,
                easing: 'swing', // can be anything
                step: function () { // called on every step
                    // Slide using the entire -ms-grid-columns setting
                    $(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
                }
            });
        }

誰かを助けるために私の答えを投稿して、最高評価の答えは私の気分を解決しませんでした。

次のコードを[上から]実装したところ、縦スクロールアニメーションが前後に揺れました。

$(function () {
 $("#first").animate({
   width: '200px'
}, { duration: 200, queue: false });

$("#second").animate({
   width: '600px'
}, { duration: 200, queue: false });
});

私は参照しました：W3 Schools Set Intervalは私の問題、つまり「Syntax」セクションを解決しました：

setInterval（関数、ミリ秒、param1、param2、...）

フォームのパラメーターを使用すると、{ duration: 200, queue: false }継続時間がゼロになり、ガイダンス用のパラメーターのみが確認されました。

長いコードと短いコードは次のとおりです。コードが機能する理由を理解したい場合は、リンクを読むか、予想される間隔のパラメーターを分析してください。

var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;

function configureRepeats() {
   window.setInterval(function () {
       autoScroll($scrollDiv, $scrollSpeed);
   }, $interval, { queue: false });
};

「autoScroll」は次のとおりです。

    $($scrollDiv).animate({
        scrollTop: $($scrollDiv).get(0).scrollHeight
    }, { duration: $scrollSpeed });

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);

幸せなコーディング！