how to animate numbers using Jquery

I am trying to animate a say $233 to $250 or decreasing from 250 to 233 ,i dont want to replace 233 by 250 instead i want a counter kind of effect and at the time of scrolling numbers zoom effect is also required. i am ne开发者_StackOverfloww to Jquery any help would be highly appreciated.

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 →

Googled this snippet and it looks pretty awesome and compact:

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

@Denis. The second answer has some problem,I change the code as follows:

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

This will avoid the precision question.

The counter is easy, however It's not very clear how you want the effect to look like(give us a link to an example). Regardless the effect would probably be unpractical to do in jQuery.

I would recommend something like raphael js

Have a look at the examples, they are very nice.

Here's a fun way to do it with a sort of slot machine effect.

Assuming this simple HTML:

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

Then:

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

Having the digits "resolve" one by one, movie-codebreaking-style, is left as an exercise.

Example: http://jsfiddle.net/redler/tkG2H/

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

read more: http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/

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

I'd recommend using the odometer javascript plugin for this: http://github.hubspot.com/odometer/

Untested - but should work along these lines

create the HTML like this:

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

and jQuery like this:

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