我有这个代码:
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)
我还没有决定要改变它的状态多少次。有没有一种方法可以通过编程方式链接动画,而不是通过编辑动画链来添加/删除链接元素?
不,如果不编辑动画队列,就无法链接动画。如果你想链接一个变量,但次数有限,你可以很容易地使用一个循环:
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();
如果我理解正确,你只需要一个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);
如果你想要的是循环,你可以使用循环来链接动画。
var $flash = jQuery('#flash'), i;
for (i = 0; i < 10; i++) {
$flash = $flash.animate({opacity: 0.35}, 200)
.animate({opacity: 0}, 200);
}
有一个较短的替代方案,使用扩展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,$);
有关详细信息,请参阅.erepeat()、.intile(count)和.animate(…,$).的API