我很难弄清楚队列在 jQuery 中是如何工作的，尤其是 fx 队列。我想做的是：
一个接一个地为多个不同的元素制作动画
先看看this fiddle。当您单击该按钮时，这两个元素都会被动画化。现在我知道我可以做类似this fiddle 的事情，我将动画放在第一个动画的回调中，但这不是一个选择，因为我有一个动画池，我想任意以特定顺序运行它们中的任何一个。例如，我可能有动画 A、B、C、D 和 E，它们都为不同的元素设置动画。有时我想按 B->A->C 的顺序执行，有时我可能想要 A->B->C。
如何使用队列来实现此功能？
【问题讨论】：
标签： javascript jquery queue jquery-animate
由于您的动画正在移动不同的元素，因此您最好管理自己的队列而不是使用 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);
}
【讨论】：
run_next。似乎有点侵入性，并在实际动画与队列之间产生了强烈的耦合。在我的完美世界中，我只有动画，A、B、C，不与任何其他对象耦合，我可以将它们放入队列中，队列会适当地处理它们。
假设您拥有所有 A、B、C...N 具有相同的类，只是为了在数组中选择它们。
每个元素都有你想要使用的动画属性。
就像我们有一个 DIVs ：
<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 );
});
【讨论】：
更新（工作）
下面的代码可以满足您的需求；它基于 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 所需的功能。它只是用于缩短将多个动画链接到单个对象所需的代码量；它确实不用于跨多个对象
你想使用deferred objects。对于您的情况，这特别容易，因为动画已经在创建 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});
}
【讨论】：