Question

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

e.g。初始值= 65 ajax call = 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

Answer 2

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

(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>

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

<span id="counter">100</span>

Answer 4

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

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

Answer 5

我最近编写了一个jQuery插件，用于使用CSS3转换和转换对数字执行“选择器样式”动画。可以使用包含工作示例的博客文章here。该代码也可以在github上获得，可以下载here。

用于动画编号的Jquery插件

5 个答案: