How to create animated counter number using jquery

Jquery , Show an image preview animated counter Disable Click Event

How to create animated counter number using jquery. now create animated counter number.Animated Number counter up plugin in Jquery to create fancy incremental number count in specific time delay. finalist has created Counter-Up jQuery plugin that animates a number from zero (counting up towards it). It supports counting up:integers 12345, floats 0.1234, formatted numbers 1,234,567.00

Also Read: How to learn Unit testing with nodejs

Here is Process for create animated counter number using jquery

Features: 
* Auto-detect for integers, floats or formatted numbers
* The plugin will also use the number of decimal places the original number is using.
* Lightweight: ~1kb
* Minimal setup

Integration:-

Include required libraries on page jquery, counter-up js and also it dependent on waypoints.js so don’t forget to include this.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

Sample Html and define class or id to which you want to put counter action.

<span class="counter">1,231,567.00</span>
<span>$</span><span class="counter">2.99</span>
<span class="counter">123456</span>

Finally add counter up function on defined class to make it actionable.

<script>
$(function() {   
  $('.counter').counterUp({
            delay: 10,
            time: 1000
        });
});
</script>

See live demo and download source code.

DOWNLOAD

Leave a Reply