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

Я пытаюсь оживить, скажем, $233 до $ 250 или уменьшить с 250 до 233 ,я не хочу заменять 233 на 250, вместо этого я хочу встречный эффект, и во время прокрутки чисел эффект масштабирования также требуется. я новичок в Jquery, любая помощь будет высоко оценена.

9
jquery jquery-animate jquery-plugins

8 ответов

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

демо →

18

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

// 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) + "%");
    }
});

Скрипка

11

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

Я бы рекомендовал что-то вроде Рафаэль js

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

2

вот интересный способ сделать это с своего рода эффектом игрового автомата.

предполагая, что это простой 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/

2

@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) + "%");
    }
});

Это позволит избежать вопроса точности.

2
$.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);
1

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

1

непроверенный-но должен работать по этим линиям

создайте 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()
0