javascript - jQuery 队列，它是如何工作的？

Question

我很难弄清楚队列在 jQuery 中是如何工作的，尤其是 fx 队列。我想做的是:

一个接一个地为多个不同的元素设置动画

看看this fiddle第一的。当您单击该按钮时，两个元素都会被动画化。现在我知道我可以做类似 this fiddle 的事情了，我将动画放在第一个动画的回调中，但这不是一个选项，因为我有一个动画池的情况，我想按特定顺序任意运行它们中的任何一个。例如，我可能有动画 A、B、C、D 和 E，它们都为不同的元素设置动画。有时我会希望按照 B->A->C 的顺序执行，有时我可能希望 A->B->C。

如何使用队列来实现此功能？

Answer 1

由于您的动画正在移动不同的元素，您最好管理自己的队列而不是使用 jquery 的队列。您可以将要运行的动画存储在一个数组中。

animations = [animation_a, animation_b, animation_c];

然后在每个动画结束时调用运行下一个动画的函数。喜欢:

function run_next() {
    if ( animations.length > 0 ) {
        next_animation = animations.shift();
        next_animation();
    }
}

function animation_a() {
    $("#element1").slideDown(500, run_next);
} 

function animation_b() {
    $("#element2").animate({left:'-=200'},1500, run_next);
} 

参见 this fiddle .