示例1:简单的动画
$('#lines').animateNumber({ number: 165 });
示例2:分隔符
var comma_separator_number_step=$.animateNumber.numberStepFactories.separator(',')
$('#world-population').animateNumber(
{
number: 7095217980,
numberStep: comma_separator_number_step
}
);
示例3:多个属性
var percent_number_step = $.animateNumber.numberStepFactories.append(' %')
$('#fun-level').animateNumber(
{
number: 100,
color: 'green',
'font-size': '30px',
easing: 'easeInQuad',
numberStep: percent_number_step
},
15000
);
示例4:自定义号码步骤处理程序
$('#points').animateNumber(
{
number: 72,
numberStep: function(now, tween) {
var target = $(tween.elem);
target
.prop('number', now) // keep current prop value
.text(now);
},
'slow'
}
);
示例5:自定义动画起始点
$('#ten')
.prop('number', 10)
.animateNumber(
{
number: 100
},
20000
);
示例6:小数
var decimal_places = 2;
var decimal_factor = decimal_places === 0 ? 1 : decimal_places * 10;
$('#decimals')
.animateNumber(
{
number: 5 * decimal_factor,
numberStep: function(now, tween) {
var floored_number = Math.floor(now) / decimal_factor,
target = $(tween.elem);
if (decimal_places > 0) {
// force decimal places even if they are 0
floored_number = floored_number.toFixed(decimal_places);
// replace '.' separator with ','
floored_number = floored_number.toString().replace('.', ',');
}
target.text('$' + floored_number);
}
},
20000
);
例7:反向倒计时
$('#revese-countdown')
.prop('number', 10)
.animateNumber(
{
number: 0,
numberStep: function(now, tween) {
var target = $(tween.elem),
rounded_now = Math.round(now);
target.text(now === tween.end ? 'Launch!' : rounded_now);
}
},
10000,
'linear'
);