JQuery Sprite Animation

by Avinashullal

HTML

<div id="animation" style="border: 1px solid rgb(153, 153, 153); margin: auto; width: 627px; height: 390px; overflow: hidden; padding: 0px; background-image: url(http://www.htmldrive.net/edit_media/2012/201211/20121129/JZoopraxiscope/example/images/jzoo.jpg); background-attachment: scroll; box-shadow: rgb(0, 0, 0) 0px 0px 40px inset; background-position: 0px 0px; background-repeat: repeat repeat;"></div>
<button id="stopGo" type="button">Go</button>

JavaScript

$(document).ready(function() {
  var flag = 0;
  var intId = 0;

  $("#stopGo").click(function() {
    if (flag == 0) {
      intId = window.setInterval(function() {
        doAni('test');
      }, 50);
      $(this).text("Stop");
    } else {
      window.clearInterval(intId);
      $(this).text("Go");
    }

    flag = Math.abs(flag - 1);
  });

  function doAni() {
    $('#animation').animate({
      'background-position': '+=10%'
    }, 1, 'linear');
  }

});