title: Stutter when animating / moving sprite with JavaScript
body: <p>I'm attempting to create an animation by moving a sprite image across a div. The sprite image contains each frame of the animation. The size of the "canvas" is 600px by 624px. Each frame on the sprite sheet is positioned every 600px and I'm moving the image 600px at a time.</p>
  
  <p>Here is what I have so far...
  <a href="http://voyced.com/crownacre/www/demo/sprite.html" rel="nofollow">voyced.com/crownacre/www/demo/sprite.html</a></p>
  
  <p>I'm using the following JavaScript to move the image across the screen...</p>
  
  <pre><code>(function myLoop(i) {
      setTimeout(function() {
          defImg.css({
              right: '-=600'
          });
          if(--i) myLoop(i); //  decrement i and call myLoop again if i &gt; 0
      }, 60) // delay ms
  })(114); // number of frames in the sprite
  </code></pre>
  
  <p>I've used several sprites all floated left as the total width of sprite sheets in 69000px, which causes even more issues if I use just one image! Hence why I have 4 at the moment.</p>
  
  <p>So... The problem I am having is that the animation pauses briefly several times. It seems fine in Firefox (for me), but you notice it in Chrome and you can't miss it in IE.</p>
  
  <p>It also always stutters every 16200px, making me think this is related to moving 1 sprite into the next on the screen.</p>
  
  <p>Ideas please people? </p>
  
  <p>Thanks in advance! </p>