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

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

Assuming this simple HTML:

123 
Go! 

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/