Simple jQuery Plugin To Animate Numeric Text - Animate Numbers

File Size: 4.99 KB
Views Total: 3558
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Plugin To Animate Numeric Text - Animate Numbers

Animate Numbers is a simple, lightweight jQuery plugin which utilizes animate() method to animate element's number to new number with commas and custom animations. Can be used as an animated counter for your web project.

How to use it:

1. Wrap the number you want to count up from into an element.

<div id="demo">0</div>

2. Put jQuery library and the jQuery animate numbers plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.animateNumbers.min.js"></script>

3. Call the plugin on the element and specify the target number you want to animate to.

$("#demo").animateNumbers(1234);

4. All parameters.

  • stop (number): number to stop on
  • commas (boolean): turn commas on/off (default is true)
  • duration (number): how long in ms (default is 1000)
  • ease (string): type of easing (default is "swing", others are avaiable from jQuery's easing plugin
$("#demo").animateNumbers(stop, commas, duration, ease);

This awesome jQuery plugin is developed by talmand. For more Advanced Usages, please check the demo page or visit the official website.