用于动画数字的 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.

例如初始值 = 65ajax 调用后的值 = 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屋！