Count from 0 to 100 in 7 seconds while doing an jQuery.animate() for a progress bar

jquery

Solution

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 + '%');
           }
        }
    }        
);​

Problem

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!

Original source