jQuery 队列，它到底是如何工作的？

Question

我很难弄清楚队列在 jQuery 中的工作原理，尤其是 fx 队列。我想做的是：

依次对多个不同元素进行动画

看看这个首先小提琴。当您单击该按钮时，两个元素都会被动画化。现在我知道我可以做类似 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);
} 

请参阅这个小提琴。

Answer 2

假设所有 A、B、C...N 都具有相同的类，只是为了在数组中选择它们。

每个元素都有您想要使用的动画属性。

就像我们有一个 DIV ：

<div class="animateMe" properties="{Left: +=50}" duration="2000", easing="linear"></div>
<div class="animateMe" properties="{Top: +=50}" duration="1000", easing="linear"></div>

然后选择所有 DIV 就会像这样。

var elements = $('div.animateMe') // Get all the objects in an array

现在有一个 jQuery shuffle 插件，可以帮助您打乱数组已选择。

elements = $.shuffle( elements );

现在您可以使用 .each() 函数单独制作动画。

$.each( elements, function(){
    var properties = this.attr('properties');
    var duration= this.attr('duration');
    var easing= this.attr('easing');
    this.animate( properties, duration, easing );
});

Answer 3

更新（工作）

下面的代码可以满足您的需求；它基于 Leopd 的自定义队列。但它不使用 jQuery 的队列或延迟对象： http://jsfiddle.net/rkw79/FPGrj/

var q = ['div1', 'div2', 'div3', 'div4'];
var next_div = q.shift();

$("button").click( function() {
    animate_div();
});

function animate_div() {
    if ( q.length > 0 ) {
        curr_div = next_div;
        next_div = q.shift();
        $('#' + curr_div).hide(2000,animate_div);
    }
    else {
        $('#' + next_div).hide(2000);
    }
} 

划掉的代码是使用延迟对象的原始解决方案。它不会产生 OP 所需的功能。它只是为了缩短将多个动画链接到单个对象所需的代码量；它不用于跨多个对象链接动画

您想要使用延迟对象。对于您的情况，这特别容易，因为动画已经创建 promise 对象： http://jsfiddle.net/rkw79/fpseA/

$("button").click( function() {
    $('#div1').growWidth().growHeight();
});

$.fn.growWidth = function () {
    return this.animate({width: 200});
}

$.fn.growHeight = function () {
   return this.animate({height: 200});
}