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

我尽可能简化代码，保持原则的实现。只需try即可快速按下几个动画按钮，您将看到混音。

也许我真的对JavaScript太过期待了:)

Answer 1

似乎我发现了这个问题......看起来现在正常工作！

我的错误是依赖缓存的jquery内部数据来检查队列是否正在运行：

if (!$._data(animWrap[0], "anims_queue.run")) {
    animWrap.dequeue("anims_queue");
}

正在快速删除此缓存，并且当动画实际运行时，新动画事件会复制“出列”调用。

Here you can see updated version。现在我维护“isQueueRunning”变量，它被“lastQueueFunction”设置为false，我总是保持在链的末尾。

希望有人会发现这有用.. :)）

队列多个jquery动画

1 个答案: