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。

Answer 2

让我们说你有所有的A，B，C ...... N都有相同的类只是为了在数组中选择它们。

每个元素都有你想要的动画属性。

就像我们有一个DIV s：

<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所需的功能。它只是用于缩短将多个动画链接到单个对象所需的代码量;它不用于链接多个对象的动画

~~您想要使用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}); }

<击>

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

3 个答案: