javascript - jQuery animation inside recursive function very slow -
i have small animation of arrow bouncing horizontaly on 3 car pictures. arrow starts 200ms per bounce , time increases 200ms each turn, until stops on 7th turn on car #3.
it works on chrome , firefox smoothly. on safari 7 starts fast , after 2 laps becomes slow , skips lot of frames.
the javascript code following:
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); }); }); }
the code on jsfiddle http://jsfiddle.net/mkeee/1/
what's problem code?
am not supposed call "play" function inside callback function?
edit: @jfriend00 pointed on comments, there's no recursion on code. "by time animation completion function called , play()
called again, original invocation of play()
has long since completed."
the typical method of doing 'looping' animation style alternate animate functions in call back.
i modified fiddle provided: 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); }); }); }
the animation same think misjudged animation width; switched on document.ready can switched function button.
Comments
Post a Comment