Number Count Up/Down Animation Plugin For jQuery
File Size: | 4.9 KB |
---|---|
Views Total: | 7426 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
easy-number-animate is a simple, lightweight jQuery number animation plugin which animates number countups and countdowns within a specific element.
How to use it:
1. Download and insert the minified version of the jQuery easy-number-animate plugin after jQuery library (slim build is recommended).
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="dist/jquery.easy_number_animate.min.js"></script>
2. Create an element where you want to show the number animation.
<div class="number">0</div>
3. Enable the number animation and set the start/end values as these:
$('.number').easy_number_animate({ start_value: 0, end_value: 100 });
4. Set the duration of the number animation.
$('.number').easy_number_animate({ start_value: 0, end_value: 100, duration: 1000 });
5. Customize the thousands separator.
$('.number').easy_number_animate({ start_value: 0, end_value: 100, duration: 1000, delimiter: ',' });
6. Callback functions.
$('.number').easy_number_animate({ start_value: 0, end_value: 100, duration: 1000, delimiter: ',', before: null, after: null });
This awesome jQuery plugin is developed by shammellee. For more Advanced Usages, please check the demo page or visit the official website.