Yet another great jQuery animate number plugin which counts the value from zero till the end the number which you define. You simply need to define end number and it will start counting.
It is a lightweight and multi-purpose plugin which work as stand-alone. You can easily trigger the numbers by using the Javascript / Jquery events such as on-Click, scroll or page load.
By defining the pageload event in the plugin configuration option, you can easily set the number to count on scroll the page only.
Similarly, you can use the clickevent to trigger the counter number to make them work on-click only.
By simply adding the end number in the plugin configuration, you can make work this plugin. The plugin will start to count up and increase that value from 0 to the end value.
How to Use jQuery Animate Number Plugin
To make work the plugin into your existing or new project, you need to first load jQuery JavaScript library and plugin’s JS file into your HTML page.
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Animate Numbers JS -->
<script src="js/jquery.animateNumbers.min.js"></script>Now you need to define the HTML element. You can use any HTML element such as div, span or input type. You can decide how the trigger counting up number will animate.
First, you need to create a wrapper (a div or input element) in which your numbers will increase. So, create a div element with a unique ID and place your initial value in it.
<div id="myCount">0</div>You can also use the input and can define the initialized value.
<input id="myCount" value="50" />After that, simply initialize the plugin in jQuery document ready function to active the numbers animation.
$(document).ready(function(){
$("#myCount").animateNumbers(52810);
});If you want to animate numbers on different events, you can execute the animation using the following syntax.
$(".element").on('event-type', function(){
$("#myNumber").animateNumbers(52810);
});Note: This plugin uses the $.animate() method of jQuery to step a number towards the desired number.