jQuery animate decimal number increment/decrement

Question

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 1

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); 
    }
});

Answer 2

Try this

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

$({numberValue: currentNumber}).animate({numberValue: 100}, {
duration: 8000,
easing: 'linear',
step: function (now) {
        $('#dynamic-number').text(now.toFixed(2)); 
}
});

Here's the Fiddle