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函数调用下一个项目。

您还可以向您的JSON添加interval并同时使用animate和delay。

Answer 5

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

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

链功能未知次数

5 个答案: