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.
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 (){ |
03 |
$( '.counter' ).each( function () { |
05 |
countTo = $ this .attr( 'data-count' ); |
07 |
$({ countNum: $ this .text()}).animate({ |
16 |
$ this .text(Math.floor( this .countNum)); |
18 |
complete: function () { |
19 |
$ this .text( this .countNum); |
This awesome jQuery plugin is developed by Konkowal. For more Advanced Usages, please check the demo page or visit the official website.