title: Spritely - Play CSS sprite forward and backward on click
body: <p>I'm trying to create a clickable sprite animation that plays forward (frame 0 --> X) on the first click and stop at frame X. Once complete, clicking it would play it in reverse (frame X --> 0) and stop on frame 0. Rinse/repeat.</p>
  
  <p>This jsFiddle has it pretty close: <a href="http://jsfiddle.net/ahainen/njHAC/3/" rel="nofollow">http://jsfiddle.net/ahainen/njHAC/3/</a></p>
  
  <p>But I'm having a problem: Click the middle circle, and it plays forward. But then clicking the circle upon completion plays it back but ends on the wrong frame. From there, it stays broken.</p>
  
  <p>I'm learning this as I go (graphic designer here), so I'm trying to figure out CSS sprite animations with clicking to animate and rewind. If there's a better way to do it than this, please let me know.</p>
  
  <p><strong>Also</strong>, I have a timer on there currently to make it unclickable while animating. I would love it if when the user clicks it (or hovers it), it would just reverse directions and stop on frame 0 or frame X.</p>
  
  <p>Any help would be greatly appreciated, please let me know if I can supply any further information.</p>
  
  <p>The relevant code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jqueryui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/spritely.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  body {background:#181818;}
  .spriteContainer {
      margin: 0 auto;
      width:320px;
      height:240px;
      position:relative;
      padding-top:120px;
      display:block;}
  .clickButton {
      width:320px;
      height:240px;
      position:absolute;
      z-index:2;}
  .animatedSprite {
      width: 320px;
      height: 240px;
      background-image: url("http://i.imgur.com/aBlIGEh.png");
      display:block;
      position:absolute;
      z-index:1;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="spriteContainer"&gt;
      &lt;div class="clickButton"&gt;&lt;/div&gt;
      &lt;div class="animatedSprite"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
  var play_index = 0;
  
  $('.clickButton').click(function(){
  $('.clickButton').css("display", "none");
      setTimeout(function(){
          $('.clickButton').css("display", "block");
      }, 940);
  });
  
  
  $('.clickButton').click(function(){
      console.log('second function start');
  
      if(play_index == 0) {
          $('.animatedSprite').sprite({fps: 24, no_of_frames:16, play_frames:16});
          play_index = 1;
      }
      else {
          $('.animatedSprite').sprite({fps: 24, no_of_frames:16, play_frames:16, rewind:true});
          play_index = 0;
      }
  });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>