示例1:简单的动画
<p>This plugin only <span id="lines">0</span> lines of code.</p> $('#lines').animateNumber({ number: 165 });
示例2:分隔符
<p>World population is <span id="world-population">0</span>.</p> var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',') $('#world-population').animateNumber( { number: 7095217980, numberStep: comma_separator_number_step } );
示例3:多个属性
<p>Fun level <span id="fun-level" style="color: red;">0 %</span>.</p> 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:自定义号码步骤处理程序
<p>Points per pixel <span id="points">0</span>.</p> $('#points').animateNumber( { number: 72, numberStep: function(now, tween) { var target = $(tween.elem); target .prop('number', now) // keep current prop value .text(now); }, 'slow' } );
示例5:自定义动画起始点
<p id="ten">From ten to hundred.</p> $('#ten') .prop('number', 10) .animateNumber( { number: 100 }, 20000 );
示例6:小数
<p id="decimals">From $0,00 to $5,00</p> // how many decimal places allows 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:反向倒计时
<p id="revese-countdown">10</p> $('#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' );