连锁函数未知次数

我正在通过未知数量的步骤对元素的顶部/左侧 css 值进行动画处理。我使用以下代码来存储动画每个步骤所需的 css 值：

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

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

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

这样每个动画都会在前一个动画完成时开始：这很好用。但是，如果我想将步骤数从 3（左上-左）增加到 6，该怎么办？还是50？如何将函数链接未知次数？

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

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

paths.length && next需要防止无限回调调用。