jQuery动画数字 [英] Jquery Plugin for animating numbers
问题描述
我正在对服务器进行ajax调用,然后更新一些统计信息.我想要一个可以对数字进行动画处理的插件.
I am making an ajax call to the server and then updating some stats. I want a plugin which animates the numbers.
例如初始值= 65 ajax调用后的值= 98
e.g. initial value = 65 value after ajax call = 98
在2秒钟的时间里,显示的值从65增加到98,并且用户能够看到-类似于数字速度计或转速表.
in a span of 2 seconds, the value displayed increases from 65 to 98 and the user is able to see that - like the digital speedometers or tachometers.
我的搜索没有促使我为此找到一个插件.有人知道这样的插件吗?
My search has not led me to find a plugin for this. Does anybody know of such plugin?
推荐答案
它没有持续时间,但是有点接近.我现在不确定如何整合持续时间,因此不得不很快将其整合在一起.
It doesnt have a duration, but it's kinda close. I'm not sure how to integrate a duration at the moment, and had to throw this together rather quickly.
(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);
<span id="counter">100</span>
这篇关于jQuery动画数字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!