Slot machine effect using jQuery

25 September, 2011.

Intention:
In an yet another cart based web-app, the intention is to make the cart page looks fancier. Praveen Selvam came up with this idea of slot machine effect in the price section whenever an item been added.

Slot Machine Effect:

Requisite:

Idea:

Javascript Code:
$('#animate_btn').click(function() {
	cashFlow($('.value'), $('#startVal').val(), $('#endVal').val(),
	$('#duration').val() * 1000, $('#decimal').val());
});

cashFlow = function(elem, from, to, duration, decimal) {
    var magicObject;
    if (typeof magicObject === 'undefined') {
        magicObject = $('<div></div>').appendTo('body');
    }
    magicObject.css({
        position: "fixed",
        left: from
    }).animate({
        left: to
    }, {
        duration: duration,
        step: function(currentLeft) {
            elem.html(Number(currentLeft).toFixed(decimal));
        },
        complete: function() {
            magicObject.remove();
        }
    });
};
Share Tweet