how to animate numbers using Jquery

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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 4

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

Answer 5

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

Answer 6

@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.