Slot machine effect using jQuery
2 minutes read

Slot Machine Effect:


  • jQuery 1.5+


  • Create an element to display the animation.
  • Next create an empty element say <div></div> and set its position: 'fixed'
  • Set the position of the empty element to the Start Value of the slot.
  • Now use jQuery animate to move the empty element from Start value to the specified End Value in a given duration.
  • jQuery animate has a step() method which gives you the current position of the div for every unit of time.
  • Now inside this step() method set the display element's text to the current position value of the empty element.
  • Since empty element moves from start value to end value, you will see the numbers changing from start value to end value in the display area.

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(); } }); };
Prasanna is a full stack web developer, with exposure to various programming languages. Uses mostly Java, Javascript these days and got ~13 years of architecting and coding enterprise software solutions.