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

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -