Increment Numeric Value At A Given Speed - jQuery Counter
| File Size: | 2.42 KB |
|---|---|
| Views Total: | 10117 |
| 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:
<span class="counter" data-count="123">0</span> <span class="counter" data-count="1234">0</span> <span class="counter" data-count="12345">0</span>
2. Include the needed jQuery JavaScript libaray on the html page.
<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.
$(document).ready(function(){
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 3000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$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.











