CODEWITHSUNDEEP
jqueryjquery-animateprogress
TheShun
TheShun

Reputation: 1218

jquery animate progress bar percentage faster than the bar (step)

i'm trying to code a (fake) animate progress bar in jquery, i'm using the function animate(), this is my code:

$("#progress_bar").animate({width:"100%"},{
                    step: function( now, fx ) {
                    var data =  Math.round(now);
                    $( "#percent" ).html(data+' % ')},duration:8000}//function pourcentages


                ); //animate

The problem is about the percent, it's much fater than the bar (which is a div go from 0 to 100% width), the counter is finish before than the bar reach the 100%. Do someone can help me to fix this ?

Upvotes: 1

Views: 5508

Answers (2)

Alexandre Lavoie
Alexandre Lavoie

Reputation: 61

I've reproduced your code and it works fine.

See fiddle here

Are you animating only one property ? If not, you might want to use something like this :

$("#progress_bar").animate({width:"100%"},{
    step: function( now, fx ) {
        if(fx.prop == 'width') { //If you animate more than 1 property
            var data =  Math.round(now);
            $( "#percent" ).html(data+' % ');
        }
    },duration:8000}//function pourcentages 
); //animate

Check a similar post for more info

Upvotes: 1

Alexandre Lavoie
Alexandre Lavoie

Reputation: 61

It probably animates in pixels even if you declare your instruction in %.

The output you receive is most likely the widht in pixels of the element at a given point.

Try something like this :

$("#progress_bar").animate({width:"100%"},{
    step: function( now, fx ) {
    var max_width = [...];
    var actual_width =  Math.round(now);
    var data_perc = (actual_width / max_width) * 100;

    $( "#percent" ).html(data_perc+' % ')},duration:8000}//function pourcentages


); //animate

Replace [..] with the max width of your bar (probably the width of your bar wrapper).

Ex :

var max_width = $('#bar_wrapper').width();

Upvotes: 0

Related Questions