How to increment number using animate with comma using jQuery?
26,766
Solution 1
Working Demo http://jsfiddle.net/4v2wK/
Feel free to change it more for your need, you can also look at the currency formatter, Hope this will fit your need :)
Code
// Animate the element's value from x to y:
var $el = $("#el"); //[make sure this is a unique variable name]
$({someValue: 40000}).animate({someValue: 45000}, {
duration: 3000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$el.text(commaSeparateNumber(Math.round(this.someValue)));
}
});
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
**output*
Solution 2
You should also add a complete function as such:
step:function(){
//..
},
complete:function(){
$el.text(commaSeparateNumber(Math.round(this.someValue)));
}
Updated Fiddle: Demo
Author by
kevllar
Updated on July 11, 2022Comments
-
kevllar almost 2 years
I'm trying to increment a number inside an element on page. But I need the number to include a comma for the thousandth place value. (e.g. 45,000 not 45000)
<script> // Animate the element's value from x to y: $({someValue: 40000}).animate({someValue: 45000}, { duration: 3000, easing:'swing', // can be anything step: function() { // called on every step // Update the element's text with rounded-up value: $('#el').text(Math.round(this.someValue)); } }); </script> <div id="el"></div>
How can I increment a number using animate with comma?
-
Duc Anh almost 11 yearsHave a look at this stackoverflow.com/questions/7327046/jquery-number-formatting
-
Tim Withers almost 11 yearsI would store the number in a data attribute, then show the comma formatted version of the number in the element. When you increment it, just increase the data version and replace the formatted version.
-
Chamara Keragala almost 11 yearsThis might help you - stackoverflow.com/questions/1990512/…
-
-
Adrian Florescu almost 10 yearsany idea why the number is not the same? I am taking about the circle around the output.
-
Tats_innit almost 10 yearsHiya @AdrianFlorescu umm how do you mean, sorry not sure what are you asking?
:)
you mean why the output is not say for example: 44,444? like this: jsfiddle.net/hVpqD -
Adrian Florescu almost 10 years@Tats_innit exactly, but looks like this is because of the animate steps. I replaced the value on complete with the original value. complete : function(){ where.text(endNr); } jsfiddle.net/5yBt8/10
-
SuperNOVA almost 10 yearsYou should also add a complete function as such: step:function(){ //.. }, complete:function(){ $el.text(commaSeparateNumber(Math.round(this.someValue))); }
-
Bungle over 8 yearsWhy? I'm fairly certain that the
step
function will be called even on the last animation step. Thecomplete
function is used to attach a callback to run after all steps are completed. -
Gntvls over 8 yearsSometimes it wasnt showing a good last result, it was random at the end, sometimes 45000, sometimes 4995 and so on, so i've added this function, and now it works just fine. Thanks!