jQuery animated number counter from zero to value

Question

I have created a script to animate a number from zero to it s value   Working  jQuery   x000D   x000D      Counter  0    animate   x000D    Counter      Single   text   x000D       x000D    duration  1000  x000D    easing   swing   x000D    step  function     x000D          Single   text Math ceil this Counter    x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt span class  Single  gt 150 lt  span gt  x000D   x000D   x000D      Not Working  I now want to run the script several times on the page for each matching class   Below is what I am trying but with no success so far   HTML   lt span class  Count  gt 200 lt  span gt   lt span class  Count  gt 55 lt  span gt    JQUERY      Count   each function        jQuery   Counter  0    animate   Counter    this  text            duration  1000      easing   swing       step  function              this  text Math ceil this Counter

User · Answer

You can do it with animate function in jQuery.

$({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
    duration: 8000,
    easing: 'linear',
    step: function () {
        $('.yourelement').html(Math.floor(this.countNum));
    },
    complete: function () {
        $('.code').html(this.countNum);
        //alert('finished');
   }
});

Demo

User · Answer

IMPORTANT  It seems like a small difference but you should really use a data attribute to hold the original number to count up to   Altering the original number can have un-intended consequences   For instance  I m having this animation run everytime an element enters the screen   But if the element enters  exits  and then enters the screen a second time before the first animation finishes  it will count up to the wrong number   HTML    lt p class  count  data-value  200   gt 200 lt  p gt   lt p class  count  data-value  70   gt 70 lt  p gt   lt p class  count  data-value  32   gt 32 lt  p gt    JQuery       count   each function            this  prop  Counter   0  animate               Counter    this  data  value                        duration  1000          easing   swing           step  function  now                                        this  text this Counter toFixed 2

User · Answer

this inside the step callback isn t the element but the object passed to animate        Count   each function     self        jQuery           Counter  0        animate           Counter    self  text                    duration  1000          easing   swing           step  function                    self  text Math ceil this Counter                            Another way to do this and keep the references to this would be      Count   each function            this  prop  Counter  0  animate           Counter    this  text                    duration  1000          easing   swing           step  function  now                  this  text Math ceil now                            FIDDLE

User · Answer

Here is my solution  and it s also working  when element shows into the viewport    You can see the code in action by clicking jfiddle  var counterTeaserL       go-counterTeaser    var winHeight     window  height    if  counterTeaserL length        var firEvent   false          objectPosTop       go-counterTeaser   offset   top             when element shows at bottom         var elementViewInBottom   objectPosTop - winHeight        window  on  scroll   function             var currentPosition     document  scrollTop              when element position starting in viewport       if  currentPosition  gt  elementViewInBottom  amp  amp  firEvent     false            firEvent   true          animationCounter                            counter function will animate by using external js also add seprator      function animationCounter                numberBlock h2   each function                  var comma separator number step               animateNumber numberStepFactories separator                   var counterValv     this  text                  this  animateNumber                                      number  counterValv                    numberStep  comma separator number step                                                      https   jsfiddle net uosahmed frLoxm34 9

User · Answer

What the code does  is that the number 8000 is counting up from 0 to 8000  The problem is  that it is placed at the middle of quite long page  and once user scroll down and actually see the number  the animation is already dine  I would like to trigger the counter  once it appears in the viewport    JS       count   each function                        this  prop  Counter  0  animate                           Counter    this  text                                                duration  4000                          easing   swing                           step  function  now                                      this  text Math ceil now                                                                    And HTML     lt span class  count  gt 8000 lt  span gt

User · Answer

You can get the element itself in  each    try this instead of using this      Count   each function  index  value        jQuery   Counter  0    animate   Counter  value text                duration  1000          easing   swing           step  function                  value text Math ceil this Counter

User · Answer

This is working for me       Count   each function            this  prop  Counter  0  animate           Counter    this  text                    duration  4000          easing   swing           step  function  now                  this  text Math ceil now

User · Answer

This is work for me     lt script type  text javascript  gt    document  ready function            countnumber 0 40  stat1  50           function countnumber start end idtarget duration               cc setInterval function                    if start  end                                              idtarget  html start                       clearInterval cc                                     else                                            idtarget  html start                      start                                    duration                      lt  script gt   lt span id  span1  gt  lt  span gt

User · Answer

Your thisdoesn t refer to the element in the step callback  instead you want to keep a reference to it at the beginning of your function  wrapped in  thisin my example        Count   each function        var  this     this     jQuery   Counter  0    animate   Counter   this text            duration  1000      easing   swing       step  function             this text Math ceil this Counter                      Update  If you want to display decimal numbers  then instead of rounding the value with Math ceil you can round up to 2 decimals for instance with value toFixed 2    step  function         this text this Counter toFixed 2

User · Answer

This worked for me  HTML CODE    lt span class  number-count  gt 841 lt  span gt    jQuery Code      number-count   each function            this  prop  Counter  0  animate           Counter    this  text                    duration  4000          easing   swing           step  function  now                  this  text Math ceil now

[javascript] jQuery animated number counter from zero to value

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to animation

Examples related to each