jQuery animateNumber Plugin Demos

Example 1: simple animation

<p>This plugin only <span id="lines">0</span> lines of code.</p>

$('#lines').animateNumber({ number: 117 });

This plugin only 0 lines of code.

Example 2: separators

<p>World population is <span id="world-population">0</span>.</p>

var comma_separator_number_step = $.animateNumber.number_step_factories.separator(',')
$('#world-population').animateNumber(
  {
    number: 7095217980,
    number_step: comma_separator_number_step
  }
);

World population is 0.

Example 3: multiple properties

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

var percent_number_step = $.animateNumber.number_step_factories.append(' %')
$('#fun-level').animateNumber(
  {
    number: 100,
    color: 'green',
    'font-size': '30px',

    easing: 'easeInQuad',

    number_step: percent_number_step
  },
  15000
);

Fun level 0 %.

Example 4: custom number step handler

<p>Points per pixel <span id="points">0</span>.</p>

$('#points').animateNumber(
  {
    number: 72,
    number_step: function(now, tween) {
      var target = $(tween.elem);

      target
        .prop('number', now) // keep current prop value
        .text(now);
    },
    'slow'
  }
);

Points per pixel 0.

Example 5: custom animation start point

<p id="ten">From ten to hundred.</p>

$('#ten')
  .prop('number', 10)
  .animateNumber(
    {
      number: 100
    },
    20000
  );

From ten to hundred.