jquery-animateNumber

jQuery numbers animation plugin, adds 'number' property and step function to jQuery's animate function properties.

Requires jQuery 1.7.0 or higher (latest tested with 3.3.1).

Quick example

<p>Fun level <span id="fun-level" style="color: red; font-size: 0px;">0 %</span>.</p>

// animateNumber accepts same arguments, as animate does
// it adds only 'number' and 'numberStep' params
$('#fun-level').animateNumber(
  {
    number: 100,
    color: 'green', // require jquery.color
    'font-size': '50px',

    // optional custom step function
    // using here to keep '%' sign after number
    numberStep: function(now, tween) {
      var floored_number = Math.floor(now),
          target = $(tween.elem);

      target.text(floored_number + ' %');
    }
  },
  {
    easing: 'swing',
    duration: 1800
  }
);

All examples

Alternative plugins for same task

jQuery Numerator

Development

npm install grunt-cli -g
npm install
https://github.com/gmarty/grunt-closure-compiler
grunt watch

Note on Patches / Pull Requests

Fork the project.
Make your feature addition or bug fix.
Send me a pull request. Bonus points for topic branches.

License

It is free software, and may be redistributed under the terms specified in the LICENSE file.