jQuery動畫可以通過編程方式鏈接嗎？

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。