jQuery队列,它是如何工作的？

Question

我很难弄清楚队列在jQuery中的工作方式,特别是fx队列.我想做的是:

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

先看看这个小提琴.单击该按钮时,两个元素都将被设置动画.现在我知道我可以做这样的小提琴,我将动画放在第一个动画的回调中,但这不是一个选项,因为我有一个情节,我有一个动画池,我想任意运行其中任何一个都按特定顺序排列.例如,我可能有动画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);
} 

看看这个小提琴。