Question

我有这段代码：

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)

并且我不确定我希望其状态改变多少次。有没有办法以编程方式链接动画，而不必通过编辑动画链来添加/删除链元素？

Answer 1

如果我理解正确，你只需要一个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);

Answer 2

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

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

Answer 3

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

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

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

Answer 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。

可以通过编程方式链接jquery动画吗？

4 个答案: