我有一个箭头在三张汽车图片上水平弹跳的小动画。箭头以每次弹跳 200 毫秒开始,每转一圈时间增加 200 毫秒,直到在 3 号车上第 7 圈停止。
它在 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()
的原始调用早已完成。”
最佳答案
执行“循环”动画风格的典型方法是在回调中交替使用动画函数。
我修改了您提供的 fiddle :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 上,可以通过按钮轻松切换回功能。
关于javascript - 递归函数内的 jQuery 动画非常慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21489883/