创建带有参数的动画队列

Creating an animation queue with parameters

本文关键字：动画 队列 参数 创建      更新时间：2023-09-26

我正在尝试利用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();
    });
};

但是我不确定如何使用参数像以前一样调用我的函数。

关于如何完成此操作的任何建议？

根据文档：

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

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

这是他们示例的小提琴，效果很好：

http://jsfiddle.net/7GxwR/

因此，为了将动画

馈送到队列中，只需创建一个函数，该函数将按顺序将所有动画堆叠到元素上，然后对元素调用.queue(...)以强制其在队列中执行。

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

基本点在这里，不要构建自己的队列/数组，如果您在已经应用了多个效果的元素上调用队列，jQuery 将为您执行此操作。

希望这有帮助。

相关文章：