swolfish swolfish - 4 months ago 27
HTML Question

jQuery animate decimal number increment/decrement

I would like to animate difference between two decimal numbers step by step.

Have found Joss Crowcroft's solution for integer numbers that works nice and I've made example on jsfiddle.
Code snippet:

$({numberValue: 35}).animate({numberValue: 100}, {
duration: 1000,
easing: 'linear',
step: function() {
$('#dynamic-number').text(Math.ceil(this.numberValue));
}
});


But if I want to animate for example number 2.85 to 3.25, can't be done on ths way. There have to be animated both parts, integer and decimal. Can it be made on simplier way except separated animations for integers and decimals?

Answer

You mean like this?

var currentNumber = $('#dynamic-number').text();

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