jquery - 複数のjqueryアニメーションをキューに入れる

Question

誰かが一般的なアニメーション キューを管理しようとしましたか?

バックエンドプログラミングでプロデューサー/コンシューマーのようなものを取得したいので、アニメーションをトリガーするイベントは、必要なアニメーションの一部を一般的なキューに追加できます。これは、チェーンのように常に処理されています。

何が悪いのかわかりません。実行をログに記録すると、正しい順序で進んでいますが、いくつかのアニメーションをすばやくトリガーすると、JS によって一連のアニメーション タスクが完全に混同されます。

jsFiddleでいくつかの例をコンパイルしました。「左」位置でアニメーション化されている、絶対配置された「.anim」ブロックの単純な構造があります。

<div id="anims_wrap">
    <div class="anim even" id="anim0">0</div>
    <div class="anim odd" id="anim1">1</div>
    <div class="anim even" id="anim2">2</div>
    <div class="anim odd" id="anim3">3</div>
    <div class="anim even" id="anim4">4</div>
    <div class="anim odd" id="anim5">5</div>
    <div class="anim even" id="anim6">6</div>
    <div class="anim odd" id="anim7">7</div>
    <div class="anim even" id="anim8">8</div>
    <div class="anim odd" id="anim9">9</div>
</div>

そして、次の基本的な方法は、最後のアニメーション化されたブロックを終了し、いくつかの 3 つのブロックに対して新しいアニメーション作品を実行する関数をキューに追加することです。チェーンは、各アニメーションが完了したときにのみ呼び出されます。独自のアニメーション キューが false に設定されています。

function queueAnimation(animId) {//animId is between 1 & 5, sent by the button triggering the animation..

    var animWrap = $("#anims_wrap");
    var animId1 = animId - 1;
    var animId2 = animId + 2;
    var animId3 = animId === 5 ? 0 : animId + 5;


    animWrap.queue("anims_queue", function (next) {
        exitPositionedAnimation(function () {

            $("#anim" + animId1).addClass("positioned").animate({
                left: 50
            }, {
                duration: 4000,
                queue: false
            });
            $("#anim" + animId2).addClass("positioned").animate({
                left: 150
            }, {
                duration: 6000,
                queue: false,
                complete: next
            });
            $("#anim" + animId3).addClass("positioned").animate({
                left: 200
            }, {
                duration: 5000,
                queue: false
            });

            console.log(animId1 + "," + animId2 + "," + animId3)
        });
    });

    //the only way I found to check if animation is in process..
    if (!$._data(animWrap[0], "anims_queue.run")) {
        animWrap.dequeue("anims_queue");
    }
}

原則の実装を維持できる限り、コードを単純化しました。いくつかのアニメーション ボタンをすばやく 押してみると、混乱が見られます。

たぶん、私は JavaScript に期待しすぎているのかもしれません :)