Skip to content

jQuery plugin for animating numbers from an existing number to a new one

Notifications You must be signed in to change notification settings

anush/jquery-animate-numbers

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

Animate Numbers jQuery Plugin

Apply this plugin to an element that contains a number and it will animate to the new number you specify.

Examples

HTML:

<div id="num">1234</div>

JS:

$("#num").animateNumbers(4321);

In this example the div #num will be animated from 1234 to 4321 using the defaults; one second, with commas, swing ease.

The other extreme is to set the options to something other than the defaults.

HTML:

<div id="num">1234</div>

JS:

$("#num").animateNumbers(4321, false, 2000, "linear");

In this example the div #num will be animated from 1234 to 4321 with these settings: two seconds, no commas, linear ease.

Most likely you will apply the plugin method to an element upon an event firing. Document ready and click are common choices.

Notes

This plugin uses the $.animate() method of jQuery to step a number towards the desired number. I got the idea from here:

http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/

I extended the example to what I have here to suit a project of mine. Decided to put it up on GitHub in case someone else finds it useful.

If the end result number is to have commas then it is suggested that the number created in HTML have commas as well.

About

jQuery plugin for animating numbers from an existing number to a new one

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%