Submit your widget

jQuery Numerator - A jQuery plugin to easily animate numbers

Created 5 years ago   Views 9734   downloads 1742    Author garethdn
jQuery Numerator - A jQuery plugin to easily animate numbers
View DemoDownload
56
Share |

A jQuery plugin to easily animate numbers.

 

Installation

Include script after the jQuery library:

<script type="text/javascript" src="/path/to/jquery-numerator.js"></script>

Usage

$('.my-value').numerator( options )

Options

easing (string)

An optional parameter to specify the animation easing. Defaults to swing.

easing: 'linear'

duration (number)

An optional parameter specifying the length of the animation in milliseconds (ms). Defaults to 500 (1/2 a second).

duration: 2000

delimiter (string)

An optional parameter specifying character(s) used to delimit thousands values.

delimiter: ','

rounding (number)

This parameter specifies the number of decimal points to display. Defaults to 0.

rounding: 2

toValue (number)

The final value that you want the number to be animated to.

toValue: 205

onStart (function)

A function to be called when the animation beings.

onStart: function(){
    alert('Animation started')
}

onStep (function)

A function to be called at each step of the animation. Accepts two arguments, now and fx.

onStep: function(now, fx){
    alert('The current value is: ' + now)
}

onComplete (function)

A function to be called when the animation is complete.

onComplete: function(){
    alert('The animation is now complete')
}

TODO

  • Implement queue functionality

License

MIT License (c) Gareth Nolan