Question

我正在尝试利用jquery队列来按顺序执行一系列功能。这些“排队”功能实际上可以为页面上的对象设置动画。

这是我构建队列的原始代码：

this.queue = function(fx, params) {
    this.animation_queue.push({fx: fx, params: params});
};

然后，一旦所有函数排队，我就会消耗它：

this.animate = function() {     
    for(var i=0; i<this.animation_queue.length; i++) {  
        this.animation_queue[i].fx.apply(this, [this.animation_queue[i].params]);
}};

显然，我遇到的问题是队列元素没有正确执行。虽然它们按顺序执行，因为每个函数都执行动画，但实际上我需要在前一个元素的动画完成后执行每个队列元素。

我查看了使用jquery队列，如下所示：

this.queue = function(fx, params) {
    this.animation_queue.delay(500, 'animations');

    this.animation_queue.queue('animations', function(next) {
         next();

    });
};

但我不确定如何使用参数调用我的函数。

关于如何实现这一目标的任何建议？

Answer 1

根据文件：

http://api.jquery.com/queue/

您无需担心构建和管理自己的队列，当您在元素上调用队列时，队列由jQuery管理。

这是他们的例子中的一个小提琴，效果很好：

http://jsfiddle.net/7GxwR/

因此，为了将动画提供给队列，只需创建一个函数，将所有动画按顺序堆叠到元素上，然后在元素上调用.queue(...)以强制它在队列中执行

如果您想要动态更改/构建队列，则需要停止所有动画，使用存储动画参数的动态JSON对象数组的循环在小提琴中构建runIt函数。时间，然后调用showIt和runIt，如jQuery API中的小提琴和示例所示。

基本点在这里，不要构建自己的队列/数组，如果你在已经应用了多个效果的元素上调用队列，jQuery会为你做这个。

希望这有帮助。

使用参数创建动画队列

1 个答案: