increment numeric counter - Download Increment Numeric Value At A Given Speed - jQuery Counter

Download Increment Numeric Value At A Given Speed – jQuery Counter

Posted on

This time I will share jQuery Plugin and tutorial about Increment Numeric Value At A Given Speed – jQuery Counter, hope it will help you in programming stack.

increment numeric counter - Download Increment Numeric Value At A Given Speed - jQuery Counter
File Size: 2.42 KB
Views Total: 4577
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A really simple jQuery counter (count up to) script for incrementing up to a certain number at a given speed and performing a callback when the countup is finished.

How to use it:

1. Wrap the initial value in an inline element and specify the target number in the data-count attribute:

1 <span class="counter" data-count="123">0</span>
2 <span class="counter" data-count="1234">0</span>
3 <span class="counter" data-count="12345">0</span>

2. Include the needed jQuery JavaScript libaray on the html page.

1 <script src="/path/to/jquery.min.js"></script>

3. The main JavaScript (jQuery script) to enable the counter. Feel free to override the duration, easing, step, complete parameters as per your needs.

01 $(document).ready(function(){
02  
03   $('.counter').each(function() {
04     var $this = $(this),
05         countTo = $this.attr('data-count');
06  
07     $({ countNum: $this.text()}).animate({
08       countNum: countTo
09     },
10  
11     {
12  
13       duration: 3000,
14       easing:'linear',
15       step: function() {
16         $this.text(Math.floor(this.countNum));
17       },
18       complete: function() {
19         $this.text(this.countNum);
20       }
21     });
22   });
23  
24 });

This awesome jQuery plugin is developed by Konkowal. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net