Make a number in the innerText of a DOM Element smoothly change from one value to another, using all Mootools' Fx options
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Docs
Source
LICENCE
README.md
package.yml

README.md

Fx.Ticker

Logo

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.

How to use

HTML

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

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