Question

我试图动画说233美元到250美元或从250减少到233，我不想用230代替233而不是我想要一种反击效果，并且在滚动数字时也需要缩放效果。我是Jquery的新手，任何帮助都将受到高度赞赏。

Answer 1

HTML

<button id="start">Start</button>
<button id="reset">Reset</button>
<input id="counter" value="233"/>

的JavaScript

$(function ()
{
    var $start = $('#start'),
        start = $start.get(0),
        $reset = $('#reset'),
        reset = $reset.get(0),
        $counter = $('#counter'),
        startVal = $counter.text(),
        currentVal = startVal,
        endVal = 250,
        prefix = '$',
        fontSize = $counter.css('font-size');

    $start.click(function ()
    {
        this.disabled = true;
        var i = setInterval(function ()
        {
            if (currentVal === endVal)
            {
                clearInterval(i);
                reset.disabled = false;
                $counter.animate({fontSize: fontSize});
            }
            else
            {
                currentVal++;
                $counter.text(prefix+currentVal).animate({fontSize: '+=1'}, 100);
            }
        }, 100);
    });

    $reset.click(function ()
    {
        $counter.text(prefix + startVal);
        this.disabled = true;
        start.disabled = false;
    }).click();
});

<强> Demo →

Answer 2

用Google搜索这个片段，它看起来非常棒和紧凑：

// Animate the element's value from 0% to 110%:
jQuery({someValue: 0}).animate({someValue: 110}, {
    duration: 1000,
    easing:'swing', // can be anything
    step: function() { // called on every step
        // Update the element's text with rounded-up value:
        $('#el').text(Math.ceil(this.someValue) + "%");
    }
});

Fiddle

Answer 3

计数器很简单，但是你想要效果看起来不是很清楚（给我们一个例子的链接）。无论这种效果在jQuery中可能都是不切实际的。

我会推荐类似raphael js

的内容

看看这些例子，它们非常好。

Answer 4

这是一种有趣的方式，通过一种老虎机效果来做到这一点。

假设这个简单的HTML：

<span id="foo">123</span> <!--- number to change --->
<a href="#" id="go">Go!</a> <!--- start the slot machine --->

然后：

var changeto = 456;

function slotmachine(id) {
    var thisid = '#' + id;
    var $obj = $(thisid);
    $obj.css('opacity', '.3');
    var original = $obj.text();

    var spin = function() {
        return Math.floor(Math.random() * 10);
    };

    var spinning = setInterval(function() {
        $obj.text(function() {
            var result = '';
            for (var i = 0; i < original.length; i++) {
                result += spin().toString();
            }
            return result;
        });
    }, 50);

    var done = setTimeout(function() {
        clearInterval(spinning);
        $obj.text(changeto).css('opacity', '1');
    }, 1000);
}

$('#go').click(function() {
    slotmachine('foo');
});

将电影代码破解风格的数字逐一“解析”留作练习。

示例：http://jsfiddle.net/redler/tkG2H/

Answer 5

@Denis。第二个答案有一些问题，我按如下方式更改代码：

// Animate the element's value from 0% to 110%:
jQuery({someValue: 0}).animate({someValue: 110}, {
    duration: 1000,
    easing:'swing', // can be anything
    step: function(now) { // called on every step
        // Update the element's text with rounded-up value:
        $('#el').text(Math.ceil(now) + "%");
    }
});

这将避免精确度问题。

Answer 6

$.fn.increment = function (from, to, duration, easing, complete) {
    var params = $.speed(duration, easing, complete);
    return this.each(function(){
        var self = this;
        params.step = function(now) {
            self.innerText = now << 0;
        };

        $({number: from}).animate({number: to}, params);
    });
};

$('#count').increment(0, 1337);

了解详情：http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/

或者没有jQuery：

function increment(elem, from, to, duration) {    
    var interval = setInterval(function(){
        if (from >= to) clearInterval(interval);        
        elem.innerText = from++;  
    }, duration);
};

increment(document.getElementById("count"), 13, 37, 100);

Answer 7

我建议使用里程表javascript插件： http://github.hubspot.com/odometer/

Answer 8

未经测试 - 但应该沿着这些方向工作

像这样创建HTML：

<div>earn $<span id='counter'>233</span> without working hard</div>

和jQuery这样：

function increment(){
    $('#counter').text(parseFloat($('#counter').text())+1)
    if(parseFloat($('#counter').text()) < 250){ setTimeout(increment,100) }
}
increment()

如何使用Jquery为数字添加动画效果

8 个答案:

HTML

的JavaScript