Question

I’ve a simple progress bar that has to go from 0 to 100% width in 7 seconds. I’ve no problem handling operations, it just need to be 7 seconds long.

The code is actually so simple:

$('.progress-bar').animate({width:'100%'}, 7000);

The width of the progress is 0% so just I need to animate it to 100%. My problem is that I also need to count from 0 to 100 to show the percentage in the same way I do for the progress (within 7 seconds).

How I can do it?

Thank you!

Answer 1

http://jsfiddle.net/C23YM/9/

Basically pass in a function to step option, and on each step call, check whether width is the one being animated since you might have, for example two properties being animated.

From the docs:

Note that the step function is called for each animated property on
each animated element. For example, given two list items, the step
function fires four times at each step of the animation

$('.progress-bar').animate(
    {width:'100%'}, 
    {
        duration:7000,
        step: function(now, fx) {
           if(fx.prop == 'width') {
               $(this).html(Math.round(now * 100) / 100 + '%');
           }
        }
    }        
);​