How to increment number using animate with comma using jQuery?

Question

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?

Have a look at this http://stackoverflow.com/questions/7327046/jquery-number-formatting — Duc Anh, Apr 26 '13 at 02:43
I 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. — Tim Withers, Apr 26 '13 at 02:50
This might help you - http://stackoverflow.com/questions/1990512/add-comma-to-numbers-every-three-digits-using-jquery — Chamara Keragala, Apr 26 '13 at 02:50

score 45 · Accepted Answer · edited Jun 16 '14 at 18:34

45

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* enter image description here

edited Jun 16 '14 at 18:34

Zig Mandel

19,571
5
26
36

answered Apr 26 '13 at 03:10

Tats_innit

33,991
10
71
77

any idea why the number is not the same? I am taking about the circle around the output. – Adrian Florescu May 05 '14 at 19:43
Hiya @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: http://jsfiddle.net/hVpqD/ – Tats_innit May 05 '14 at 21:05
@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); } http://jsfiddle.net/5yBt8/10/ – Adrian Florescu May 06 '14 at 07:41
You should also add a complete function as such: step:function(){ //.. }, complete:function(){ $el.text(commaSeparateNumber(Math.round(this.someValue))); } – SuperNOVA Jul 18 '14 at 08:02

SuperNOVA · Answer 2 · 2016-12-14T09:03:34.670

12

You should also add a complete function as such:

step:function(){
    //..
},
complete:function(){
    $el.text(commaSeparateNumber(Math.round(this.someValue)));
}

Updated Fiddle: Demo

edited Dec 14 '16 at 09:03

answered Jul 18 '14 at 08:11

SuperNOVA

721
7
15

Why? I'm fairly certain that the `step` function will be called even on the last animation step. The `complete` function is used to attach a callback to run after all steps are completed. – Bungle Sep 05 '15 at 05:31
Sometimes 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! – Gntvls Oct 13 '15 at 09:22

score 0 · Answer 3 · answered May 07 '23 at 21:48

Had the same problem and used toLocaleString to put commas As suggested in the above answer I found the result deviating from the real value and I solved that by adding the complete callback function that is called when the animation is finished

value_to_be_shown=100000000
// Animate a value from 0 to `value_to_be_shown`
$({
    someValue: 0 // Starting value
}).animate({
    someValue: value_to_be_shown // Ending value
}, {
    duration: 1000, // Animation duration in milliseconds
    easing: 'swing', // Easing function to control acceleration of the animation
    step: function () { // Function to be called on every step of the animation
        // Update the element's text with the rounded-up value of `someValue`:
        $('#el_id').text(Math.round(this.someValue).toLocaleString('en-US'));
    },
    complete: function () { // Function to be called after the animation completes
        // Update the element's text with the final value
        $('#el_id').text(value_to_be_shown.toLocaleString('en-US'));
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div style="background-color:gray;width:300px;text-align:center;height:100px;padding:20px;margin:20vh auto;">
<div style="font-size:2rem;font-weight:bold" id="el_id">0</div>
</div>

How to increment number using animate with comma using jQuery?

3 Answers3

Linked