JQuery animate: change speed while it is running

Question

I have a sliding div and several buttons that will trigger the animation at different speeds (by using varying values for duration).

The buttons are something like: [Left x2][Left x1][Left x0.5][Right x0.5][Right x1][Right x2]

My code is currently like:

  //leftVal is set based on where the div is currently placed
  //timeLeft is set based on which button is "on hover"  

  $('#content-holder').animate({       
    "left": leftVal        
  }, {queue:false, duration:(timeLeft), easing:"quadEaseOut"});       

This is fine in Chrome but on other browsers like IE this results in a jumpy animation and you can visibly see the scrolling div stopping for a split second before continuing at the new speed.

I've got a feeling that the best way to achieve a variable speed scroll would be to directly affect the duration of the animation without killing it and starting a new one, but I'm not sure if this is possible. Any tips?

Answer 1

I think you're looking for this:

$('#content-holder').stop().animate({       
"left": leftVal
}, {queue:false, duration:(timeLeft), easing:"quadEaseOut"});

.stop() kills the queue, and after that you start your animation. (http://api.jquery.com/stop/)

I usually use it to avoid my website tripping out when you spam multiple buttons.

Please note that because you are using easing that the animation wont run smooth. When you call the new animation the easing will "play" from the start as well.

However, reading the description if your problem I guess that's what you want.

Please let me know if it helped!