jquery animate无法正常工作

Question

When I use jQuery .animate() with a bootstrap progress bar to set progress percentages, it only works normal the first time I use it. I've made a JSFiddle here: http://jsfiddle.net/43bqP/

When it just had to go to 50, it somehow first goes above 500 and then animates back to 50. How can I fix this?

Answer 1

The problem is due to

duration : pauseBetweenSteps / 2

and the alert() method called when all the steps have been executed, but the animation is still in act.

I'm not sure to understand why you're setting duration like this. Try leaving the default (400) by unsetting it, and add a setTimeout by 500ms around the alert("done") , to be sure the animation has ended.

Working eg. http://jsfiddle.net/eEE87/

Answer 2

What about to calculate it into pixels? Snippet of code:

...
var stepBy  = $("div.progress").width() / steps.length;
...
$("div#update div.progress div.progress-bar").animate({
   width   : (stepBy + (stepBy * step))
}
...

JSFiddle with full code.