Easy jQuery Number Animation Plugin - animateNumber

animateNumber is a jQuery plugin that enables you to animate numbers with step function and easing effects support.

See also:

• Simple jQuery Plugin For Animating Numbers - Numerator

Basic usage:

1.  Include jQuery javascript library and jQuery animateNumber plugin in the page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.animateNumber.js"></script>

2. Include jQuery easing plugin for easing options. (Optional)

<script src="jquery.easing.1.3.js"></script>

3. Include jQuery color plugin for integrating with color animation. (Optional)

<script src="jquery.color.js"></script>

4. Create a container for the animated numbers.

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

5. The javascript.

<script>
$('#target').animateNumber(
{
number: 100, 
color: 'green', // color animation
'font-size': '30px',
easing: 'easeInQuad' // easing options

number_step: function(now, tween) {
var floored_number = Math.floor(now),
target = $(tween.elem);

target.text(floored_number + ' %');
}
},
15000
)
</script>

Change logs:

v0.0.14 (2016-12-07)

• update to the latest version

v0.0.13 (2016-02-20)

• update to the latest version

v0.0.12 (2015-10-29)

• update to the latest version

v0.0.11 (2015-08-12)

• update to the latest version

v0.0.9 (2014-02-07)

• update to the latest version

---

This awesome jQuery plugin is developed by aishek. For more Advanced Usages, please check the demo page or visit the official website.