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?

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

回答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

来源：https://stackoverflow.com/questions/16574191/jquery-animate-decimal-number-increment-decrement