CODEWITHSUNDEEP
jquery
Yoga Fishguts
Yoga Fishguts

Reputation: 116

Increment / decrement numeric jQuery

i found this code from Joss Crowcroft's solution, maybe similar with this question jquery-animate-decimal-number-increment-decrement the TS have made the example on jsfiddle example

jQuery({someValue: 0}).animate({someValue: 110}, {
duration: 1000,
easing:'swing', // can be anything
step: function() { // called on every step
    // Update the element's text with rounded-up value:
    $('#el').text(Math.ceil(this.someValue) + "%");
}});

but my question is different, when i change the end someValue 110 to big numbers like 1000000 or millions. the end of animate numbers won't be as exact as the end someValue anymore, sometimes it might end up at 999876 or etc below 1000000. How can i make it to end the animated numbers exactly as the endValue?

Upvotes: 2

Views: 935

Answers (1)

Thomas C. G. de Vilhena
Thomas C. G. de Vilhena

Reputation: 14555

You can provide a done function that will be called when the animation ends, just like Orbling suggested:

$({numberValue: currentNumber}).animate({numberValue: 1000000}, {
    duration: 8000,
    easing: 'linear',
    step: function () { 
        $('#dynamic-number').text(Math.ceil(this.numberValue)); 
    },
    done: function () {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
});

Working fiddle: http://jsfiddle.net/WZC4F/

Upvotes: 1

Related Questions