javascript - 连锁功能未知次数

Question

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

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

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

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

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

Answer 1

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

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

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

Answer 2

相反，有一个递归函数，它会调用自身，直到路径数组的最后一个元素。

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

(function animateNext(i){

  $element.animate(paths[i],function(){

    //on animation complete, check if the next path exists
    if(paths[++i]){

      // if so, let's animate using the next path
      animateNext(i);
    }
  });

//start from index 0
}(0)); 

Answer 3

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

(function animateElement(index) {
    if (paths[index] == null) return;
    $element.animate(paths[index], function () {
        animateElement(index++);
    });
})(0);

Answer 4

您可以循环每个项目并使用该success函数调用下一个项目。

您还可以潜在地将 an 添加interval到您的 JSON 中并串联使用animateand delay。

Answer 5

我对 jQuery 没有任何经验，所以我假设您需要输出animate(a)来调用下一个。

var e = $element;
for (var i = 0; i < paths.length; i++) {
    e = e.animate(paths[i]);
}