我有一个箭头的小动画,在三张车的照片上蹦蹦跳跳。箭头开始时每次弹跳200ms,每次转弯时间增加200ms,直到第3次转弯停在第3次。
它几乎可以在Chrome和Firefox上运行。在Safari 7上,它快速启动,经过两圈后变得非常慢,并且跳过很多帧。
Javascript代码如下:
var fwd = true;
var cnt = 6;
var time = 200;
function play(){
var tgt = fwd ? '310px' : '10px';
$('#arrow').animate({left: tgt}, time, function() {
if (cnt > 0){
cnt--;
fwd = !fwd;
time += 200;
play();
} else {
finalTarget();
}
});
}
function finalTarget (){
$('#arrow').animate({left: '230px'}, 466, function(){
$('#car3').hide(0).show('pulsate', {times: 3}, 600, function(){
$('#car1, #car2').fadeTo('slow', 0.3);
});
});
}
代码也在JSFiddle http://jsfiddle.net/MkeeE/1/
上此代码有什么问题?
我不应该在回调函数中调用“play”函数吗?
修改:
正如@jfriend00指出评论,这段代码没有递归。 “当调用动画完成功能并再次调用play()
时,play()
的原始调用早已完成。”
答案 0 :(得分:1)
执行“循环”动画风格的典型方法是在回调中替换动画函数。
我修改了你提供的小提琴:http://jsfiddle.net/Culyx/fLz5U/4/
<强> Jquery的:强>
cnt = 6;
var arrowSpeed = 400;
bounceLeft = function(){
$("#arrow").animate({left: "+=380px"},{duration:arrowSpeed, complete: bounceRight});
}
bounceRight = function(){
cnt--;
if(cnt>0){
$("#arrow").animate({left: "-=380px"},{duration:arrowSpeed, complete: bounceLeft});}else{
finalTarget();
}
}
bounceLeft();
function finalTarget (){
$('#arrow').animate({left: '230px'}, 466, function(){
$('#car3').hide(0).show('pulsate', {times: 3}, 600, function(){
$('#car1, #car2').fadeTo('slow', 0.3);
});
});
}
动画是一样的,但我认为我误判了动画的宽度;同时将其切换到Document.Ready可以通过按钮轻松切换回功能。