Sprite Animation with jQuery

by raad

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 50px; 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');
            }, 500);
            $(this).text("Stop");
        } else {
            window.clearInterval(intId);
            $(this).text("Go");
        }
        
        flag = Math.abs(flag - 1);
    });
    
    function doAni() {
      $('#animation').animate(
        {
          'background-position': '+=10%'
        }, 1, 'linear', function() {
            //$('#animation').css('background-position', '50px 50px');
            var bgp=$('#animation').css('background-position');
            
            }
      );
      
    }

});