连锁功能未知次数答案

【问题标题】：Chain functions unknown number of times连锁功能未知次数
【发布时间】：2013-03-11 20:04:40
【问题描述】：

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

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

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

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

以便每个动画在前一个动画结束时开始：这工作正常。但是，如果我想将步数从 3（左上左）增加到 6，该怎么办？还是50？如何将函数链接到未知次数？

【问题讨论】：

你确定它工作正常吗？在动画结束时调用complete 处理程序。所以它应该类似于$element.animate(paths[0], function() { $element.animate(paths[1], ...) });。链接应该同时启动所有动画。
@VisioN 是的，这样的链接与使用回调的方式相同。见api.jquery.com/animate/#example-2

标签： javascript jquery

【解决方案1】：

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

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

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

【讨论】：

【解决方案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));

【讨论】：

【解决方案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);

【讨论】：

【解决方案4】：

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

您还可以将interval 添加到您的JSON 中，并同时使用animate 和delay。

【讨论】：

【解决方案5】：

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

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

【讨论】：