title: JS/jQuery - Play GIF only once on hover
body: <p>Recently we made some GIF animations for our website. One of the animation is a marker on a map, which 'jumps' in the air. Our idea was to let the marker jump only once on mouse over. In other words: it only should play once and not go into an endless loop when hovering.</p>
  
  <p>I started by reading this post: <a href="https://stackoverflow.com/questions/7473117/animating-a-gif-on-hover">Animating a gif on hover</a>. I used the code to start the animation on hover and replace it with a static image on mouse out. </p>
  
  <p>But this doesn't bring me near to what I want. With this script, it keeps playing in a loop, which is logic but exactly what we don't want. Also, when you go mouse out, we want the GIF to continue with the animation until is finished, and not stop immediately. Last but not least: when you hover, go mouse out and then immediately hover again while the animation is still going, it shouldn't restart while it is still playing. </p>
  
  <p>As I understand now, and what I wasn't realizing when we're creating the animations, it is very hard to control a GIF animation with jQuery.</p>
  
  <p>The only thing I can think of is to work with the time/duration of the animation. Eg. if the animation takes 3 seconds, then we could replace the static image (on hover) with the GIF for exactly that amount of time. We could even write an universal script for all the GIFs, if we pass the duration in a data attribute in the img tag. But that would mean writing a lot of code and it doesn't seem like the easiest way to me.</p>
  
  <p>Does anyone have an idea of a more simple way to achieve what we want? I'm looking forward hearing your thoughts on this one. </p>