jQuery Animate Numbers – Animated Number Increase

A lightweight (1.52KB Minified), multi-purpose and stand-alone plugin for jQuery to animate numbers. The number animation can be trigger with different JavaScript / jQuery events (i.e on click, scroll, load etc). You just need to input the ending value of number in plugin configuration. Then, the plugin count up / increase that value from 0 to end value.

Furthermore, it is also compatible with Bootstrap and other frameworks. You can fully customize it with additional CSS.

Plugin Overview

Plugin: Animate Numbers
Author: talmand
Licence: MIT Licence
Published: January 17, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.8.3 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 7.40 KB

How to Use jQuery Animate Numbers Plugin

1. First of all 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>

2. Now decide, how would you like to trigger counting up number animation? Ok, you can animate values on almost all type of JavaScript events. First you need to create a container (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="myNumber">0</div>

2.1 If you want to increase number in input element, you can define code as below:

<input id="num_input" value="1234" />

3. After that, initialize the plugin in jQuery document ready function to active the numbers animation.

$(document).ready(function(){

   $("#myNumber").animateNumbers(52810);

});

Note: The plugin initialization is same for all type of HTML elements (i.e div, input, span etc). Just initialize the plugin with that element id or class.

4. 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);

});

Tip: Define the event-type (i.e click, load, scroll, submit etc.) in the above mentioned code block to run number animation.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...