用于数字动画的 Jquery 插件

Question

我正在向服务器发出 ajax 调用，然后更新一些统计信息。我想要一个可以为数字添加动画的插件。

例如初始值 = 65ajax调用后的值= 98

在 2 秒内，显示的值从 65 增加到 98，用户能够看到这一点 - 就像数字速度表或转速表一样。

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

Answer 1

这是一种使用 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