<p>This plugin only <span id="lines">0</span> lines of code.</p>
$('#lines').animateNumber({ number: 117 });
This plugin only 0 lines of code.
<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.
<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 %.
<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.
<p id="ten">From ten to hundred.</p>
$('#ten')
.prop('number', 10)
.animateNumber(
{
number: 100
},
20000
);
From ten to hundred.