Fx.NumberTicker 1.0

Make a number in the innerText of a DOM Element smoothly change from one value to another. This is like tweening a style value, but instead you tween the html content integer value.

You may also provide a transformation function in the options, which is useful for prepending zeroes or simulating float values for example.



Details

Author
Antoine Goutenoir
Current version
1.0
GitHub
Goutte/Fx.NumberTicker
Downloads
967
Category
Effects
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: Fx

How to use

HTML

html <span id="myCounter">0</span>

JAVASCRIPT

``` javascript // Create the Ticker like any other Fx var numberTicker = new Fx.NumberTicker('myCounter'); numberTicker.start(0,100);

// or use shorthand version $('myCounter').numberTicker(100);

// also, you can provide any of Fx options, plus a transformer function : $('myCounter').numberTicker(100, { duration: 5000, transformer: function(i) { // Prefix with zeroes so we have a 5 digits number return (Array(5).join('0') + i).slice(-5); } }); ```


Demo

http://jsfiddle.net/goutte/K6R8k/


Thanks

FOSS lovers everywhere <3


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus