可以以编程方式链接 jquery 动画吗？答案

【问题标题】：Can jquery animations be chained programmatically?可以以编程方式链接 jquery 动画吗？
【发布时间】：2012-09-19 18:28:24
【问题描述】：

我有这个代码：

jQuery('#flash').animate({opacity: 0.35}, 200)
                .animate({opacity: 0}, 200)
                .animate({opacity: 0.35}, 200)
                .animate({opacity: 0}, 200)
                .animate({opacity: 0.35}, 200)
                .animate({opacity: 0}, 600)

我还没有决定要改变多少次它的状态。有没有办法以编程方式链接动画，而不必通过编辑动画链来添加/删除链元素？

【问题讨论】：

标签： javascript jquery chaining

【解决方案1】：

不，您不能在不编辑动画队列的情况下链接动画。如果您想链接一个变量，但次数有限，您可以使用循环轻松完成：

var flash = $("#flash");
for (var i=0; i<n; i++)
    flash.animate({opacity: 0.35}, 200).animate({opacity: 0}, 200);

如果您想要一个无限循环，或者在将来满足某个条件时停止循环，您希望在动画队列上挂钩回调，重新启动函数：

var flash = $("#flash");
function anim() {
    // if (condition)
    flash.animate({opacity: 0.35}, 200).animate({opacity: 0}, 200, anim);
                                            // call "recursively": ^^^^
}
anim();

【讨论】：

【解决方案2】：

如果我理解正确，您只需要一个 FOR 循环：

function animate_n_times(n) {
   var flash = $('#flash');
   for(var i=0;i<n;i++) {
      flash.animate({opacity: 0.35}, 200)
           .animate({opacity: 0}, 200);
   }

}

然后像这样调用：

animate_n_times(3);

【讨论】：

【解决方案3】：

如果您正在寻找，您可以使用循环链接动画。

var $flash = jQuery('#flash'), i;

for (i = 0; i < 10; i++) {
    $flash = $flash.animate({opacity: 0.35}, 200)
                   .animate({opacity: 0}, 200);
}

【讨论】：

【解决方案4】：

还有一个更短的替代方案，使用扩展名jquery-timing：

动画给定次数：

$('#flash').repeat().animate({opacity:0.35}, 200)
    .animate({opacity:0}, 200).until(10);

作为无限循环：

$('#flash').repeat().animate({opacity:0.35},200).animate({opacity:0},200,$);

详见.repeat()、.until(count)、.animate(…,$)的API。

【讨论】：