链功能未知次数

我通过未知数量的步骤为元素的顶部/左侧CSS值设置了动画。我使用下面的代码来存储所需的CSS值动画的每一步：链功能未知次数

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

，然后可以通过运行动画：

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

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

来源

2013-03-11 ͢bts

你确定它能正常工作吗？在动画结束时，调用'complete'处理程序。所以它应该像'$ element.animate（paths [0]，function（）{$ element.animate（paths [1]，...）}）;'。 Chaining应该一次启动所有的动画。 – VisioN 2013-03-11 11:39:01

@VisioN是的，像这样的链接就像使用回调一样。请参阅http://api.jquery.com/animate/#example-2 – 2013-03-11 11:58:37

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

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

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

来源

2013-03-11 11:48:36 dfsq

+1非常好的解决方案！ – VisioN 2013-03-11 12:08:00

-1

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

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

来源

2013-03-11 11:39:15

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

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

来源

2013-03-11 11:39:29

改为使用递归函数，直到路径数组的最后一个元素为止。

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));

来源

2013-03-11 11:43:20 Joseph

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

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

来源

2013-03-11 11:48:16

链功能未知次数

回答

相关问题