jquery-animateNumber数字动画插件

数字过渡数字动画数字 animate 数字递增数字递加

数字的过度效果兼容IE7+

另外附加jquery.color.min.js颜色过渡以及字体过渡效果

所有案例：http://aishek.github.io/jquery-animateNumber/

实例一、基础动画

//html代码，下面例子相同。
<p>This plugin only <span id="lines">0</span> lines of code.</p>
//JS 代码，请把代码放入script标签内，下面例子相同
$('#lines').animateNumber({ number: 165 });

实例二、数字间显示分隔符

<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
  }
);

实例三、使用多个属性控制动画

<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
);

实例四、自定义数字步阶处理方法（句柄）

$('#points').animateNumber(
 {
   number: 72,
   numberStep: function(now, tween) {
   var target = $(tween.elem);
   target
    .prop('number', now) // keep current prop value
    .text(now);
   }
 }
);

实例五、定义动画数字的开始数据，下面实例定义的是从10到100数据的变化

<p id="ten">From ten to hundred.</p>
 
$('#ten')
   .prop('number', 10)
   .animateNumber(
   {
     number: 100
   },
   20000
);

实例六、带小数位

<p id="decimals">From $0,00 to $5,00</p>

// 需要保留的小数位数

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

);

实例七、倒计时，以下代码为从10倒数到0

<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'
 );

http://www.jqcool.net/animate-number.html

http://www.jq22.com/jquery-info3030

https://github.com/aishek/jquery-animateNumber

—————————————————————————————————-

还有简单的方法支持小数点，还可以自动进行金钱格式化，还有数字动画效果。

效果：https://sdeno.com/wp-content/uploads/2016/09/countTo/1.html