I have a sliding div and a few buttons that will start the animation at different speeds (using different values for the duration).
The buttons look something like this: [Left x2] [Left x1] [Left x0.5] [Right x0.5] [Right x1] [Right x2]
My code currently looks 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 good in Chrome, but in other browsers such as IE, this leads to lively animations, and you can noticeably see the scroll of the div stop for a second before continuing at a new speed.
I have the feeling that the best way to achieve speed with variable speed is to directly affect the duration of the animation without killing it and not starting a new one, but I'm not sure if this is possible. Any tips?