用于动画数字的 Jquery 插件答案

【问题标题】：Jquery Plugin for animating numbers用于动画数字的 Jquery 插件
【发布时间】：2011-02-17 21:21:40
【问题描述】：

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

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

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

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

【问题讨论】：

哇，三个实现...给我一些时间，让我尝试一下，看看这是否是我的想法。谢谢！

标签： jquery jquery-plugins

【解决方案1】：

这是一个使用 jQuery 的 animate() 的潜在解决方案，作为函数实现。 “持续时间”和“缓动”参数是可选的。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我最近编写了一个 jQuery 插件，用于使用 CSS3 变换和过渡对数字进行“选择器样式”动画。可以使用here 来描述它的博客文章以及工作示例。代码也在github上，可以here下载。

【讨论】：