用于动画编号的Jquery插件

我正在对服务器进行ajax调用，然后更新一些统计信息。 我想要一个能够激活数字的插件。

例如，ajax call = 98后的初始值= 65值

在2秒的时间内，显示的值从65增加到98，用户可以看到 – 就像数字速度表或转速计一样。

我的搜索没有让我找到一个插件。 有人知道这样的插件吗？

Answer 1

它没有持续时间，但它有点接近。 我不确定如何整合持续时间，并且必须相当快地将它们放在一起。

(function($) { $.fn.animateNumber = function(to) { var $ele = $(this), num = parseInt($ele.html()), up = to > num, num_interval = Math.abs(num - to) / 90; var loop = function() { num = Math.floor(up ? num+num_interval: num-num_interval); if ( (up && num > to) || (!up && num < to) ) { num = to; clearInterval(animation) } $ele.html(num); } var animation = setInterval(loop, 5); } })(jQuery) var $counter = $("#counter"); $counter.animateNumber(800); 

 100 

Answer 2

这是一个使用jQuery的animate（）的潜在解决方案，作为一个函数实现。 “duration”和“easing”参数是可选的。

 function animateNumber($input, num, duration, easing) { $input .data("start", parseInt($input.val())) .animate({"val":parseInt(num)}, { easing: easing == undefined ? "linear" : easing, duration: duration == undefined ? 500 : parseInt(duration), step: function(fin,obj) { var $this = jQuery(this); var start = parseInt($this.data("start")); $this.val(parseInt((fin-start)*obj.state) + start ); } }); } // Usage animateNumber($("#my_input_box"), 23); animateNumber($("#my_input_box"), 23, 1500, "swing"); // 1.5 sec, swing easing 

Answer 3

Simshaun的代码完美无缺，除非动画的数字小于当前值; 导致无限循环的数字地板。

这是更新的代码，

 (function($) { $.fn.animateNumber = function(to) { var $ele = $(this), num = parseInt($ele.html()), up = to > num, num_interval = Math.abs(num - to) / 90; var loop = function() { num = up ? Math.ceil(num+num_interval) : Math.floor(num-num_interval); if ( (up && num > to) || (!up && num < to) ) { num = to; clearInterval(animation) } $ele.html(num); } var animation = setInterval(loop, 5); } })(jQuery) var $counter = $("#counter"); $counter.animateNumber(800); 

 100 

Answer 4

这是一个jquery插件，允许您为数字设置动画：

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

Answer 5

我最近编写了一个jQuery插件，用于使用CSS3转换和转换对数字执行“选择器样式”动画。 这里有一篇博文，上面有工作示例。 代码也可以在github上找到，可以在这里下载。