title: reverse sprite animation on mouseout
body: <p>I have a sprite animation that I would like to play when the mouse hovers over the object and then play in reverse and stop on the first frame whenever the mouse leaves the object. </p>
  
  <p>This is what I have for the mouse enter animation:</p>
  
  <pre><code>$("#banner").mouseenter(function(){ $('#bannerstache').sprite({fps: 200, no_of_frames: 34,   play_frames:34}); });
  </code></pre>
  
  <p>Basically, when you hover over the banner, a mustache "grows" until it's completed at frame 34. (Whereas, on frame 1, there is no mustache.)</p>
  
  <p>I want this mustache to play in reverse and go back to frame 1  whenever the mouse leaves the hovered state. </p>
  
  <p>The problem is, I've tried a few methods of reversing the playback, but it doesn't always reverse back to the first frame. </p>
  
  <p>How can I achieve this?</p>
  
  <p>Thank you so much if you're able to provide some input!</p>