JQuery decimal count animated

Question

I was wondering if i could get some help with animating a decimal counter.

I have everything working, but i want the count to go up to 100, but it always ends up in random numbers like 99.31% or 99.56%. I have tried lots of different solutions but none of them worked.

var percent_hours = $('.percent_hours').text();
$({numberValue: 0}).animate({numberValue: percent_hours}, {
    duration: 1100,
    easing: 'linear',
    step: function() {
        $('.percent_hours').text(Math.ceil(this.numberValue*100)/100 + "%");
    }

});

Here is my jsfiddle.

Any help would be greatly appreciated.

Thank you in advance.

Answer 1

Accordingly to docs:

step: A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.

Perhaps what we are looking for is:

progress: A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties (version added: 1.8)

Putting in use:

var percent_hours = $('.percent_hours').text();
$({numberValue: 0}).animate({numberValue: percent_hours}, {
  duration: 1100,
  easing: 'linear',
  progress: function() {
    $('.percent_hours').text(Math.ceil(this.numberValue*100)/100 + "%");
  }
});

FIDDLE: http://jsfiddle.net/q9CuK/125/

Answer 2

a hokey but working answer would be to add a complete.

var percent_hours = $('.percent_hours').text();
$({numberValue: 0}).animate({numberValue: percent_hours}, {
    duration: 1100,
    easing: 'linear',
    step: function() {
        $('.percent_hours').text(Math.ceil(this.numberValue*100)/100 + "%");
    },
    complete: function(){$('.percent_hours').text('100%')                     }

});