链功能未知次数 [英] Chain functions unknown number of times

问题描述

我正在通过未知数量的步骤来设置元素的顶部/左侧css值的动画.我正在使用以下代码存储动画每一步所需的css值:

I am animating an element's top/left css values via an unknown number of steps. I'm using the following code to store the required css values for each step of the animation:

paths = [{ left:-300 }, { top:-161 }, { left:-402 }];

然后我可以通过以下方式运行动画:

I can then run the animation via:

$element.animate(paths[0]).animate(paths[1]).animate(paths[2]);

，以便每个动画在上一个动画结束时开始:这很好.但是，如果我想将步数从3(从左上到左)增加到6，该怎么办?还是50?如何链接功能未知次数?

so that each animation starts when the previous one finishes: this works fine. However, what if I wanted to increase the number of steps from 3 (left-top-left) to 6? Or 50? How can I chain functions an unknown number of times?

推荐答案

$element.animate(paths.shift(), function next() {
    $(this).animate(paths.shift(), paths.length && next);
});

http://jsfiddle.net/Xsz8w/2/

paths.length && next是防止无限回调调用所必需的.

paths.length && next is needed to prevent infinite callback invocation.

这篇关于链功能未知次数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！