Suppose you want to increment number from 400 to 400000 for a duration of 5 second, ensuring the number is separated by comma. Following code demonstrate how to achieve this.
HTML
<div id="currency"> <div>
JQuery
// Animate the element's value from 400 to 400000:
var currency = $("#currency"); //[make sure this is a unique variable name]
$({someValue: 400}).animate({someValue: 400000}, {
duration: 5000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
currency.text(commaSeparateNumber(Math.round(this.someValue)));
},
done: function() {
alert('animation complete');
}
});
/**
* Format the number, so it will be seperated by comma
*/
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}