как анимировать числа с помощью Jquery

Question

Я пытаюсь анимировать, скажем, $ 233 до $ 250 или уменьшать с 250 до 233, я не хочу заменять 233 на 250 вместо этого, я хочу использовать эффект счетчика, и во время прокрутки чисел также требуется эффект масштабирования. Я новичок в 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();
});

Демо & # x2192;

Answer 2

Погуглил этот фрагмент, и он выглядит довольно круто и компактно:

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

@ Денис.Второй ответ имеет некоторые проблемы, я изменяю код следующим образом:

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

Счетчик прост, однако не очень понятно, как вы хотите, чтобы эффект выглядел (дайте нам ссылку на пример).Независимо от того, что эффект, вероятно, было бы непрактичным в jQuery.

Я бы порекомендовал что-то вроде Raphael JS

Посмотрите на примеры, они очень хороши.

Answer 6

Я бы порекомендовал использовать для этого плагин javascript одометра: http://github.hubspot.com/odometer/

Answer 7

$.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 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()