jQuery animated number counter from zero to value

by

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

More Related Contents:

  1. CSS3-Animate elements if visible in viewport (Page Scroll)
  2. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  3. What is wrong with this basic Javascript code? [closed]
  4. jQuery Mobile: document ready vs. page events
  5. How can I get the data-id attribute?
  6. jQuery Mobile: Markup Enhancement of dynamically added content
  7. How to submit an HTML form without redirection
  8. Is there a DOM event that fires when an HTML select element is closed?
  9. How do I remove tinyMCE and then re-add it?
  10. How to read xml file contents in jQuery and display in html elements?
  11. Attach an event in a child iframe to a handler in the parent window
  12. jQuery click anywhere in the page except on 1 div
  13. HTML anchor link – href and onclick both?
  14. How to ONLY trigger parent click event when a child is clicked
  15. How do I rotate a single object on an html 5 canvas?
  16. How can I detect when a new element has been added to the document in jquery?
  17. JavaScript Loading Screen while page loads
  18. jQuery: trigger a hover event from another element
  19. Change text color based on brightness of the covered background area?
  20. jQuery – Sticky header that shrinks when scrolling down
  21. jQuery text() and newlines
  22. Trigger a button click inside an iframe [duplicate]
  23. Remove scrollbar but not scrolling functionality [duplicate]
  24. Combine two selectors with one jQuery object
  25. fade effect using javascript no jquery?
  26. How to properly unload/destroy a VIDEO element
  27. How to hide optgroup/option elements?
  28. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  29. Html duplicated ID
  30. Can you have multiple lines in an element?

Leave a Comment