title: Onclick play GIF image with jQuery and start from beginning
body: <p>I have a website with images on it. Some of the images are animated GIF images. What I've done is to show a static image of the GIF and on a click event, the actual GIF images is displayed.</p>
  
  <p>Here is my code:</p>
  
  <p>JQuery</p>
  
  <pre><code>$(".theimage").click(function() {
  $(this).addClass('hidden');
  $(this).next().removeClass('hidden');
  });
  $(".theimage2").click(function() {
   $(this).addClass('hidden');
  $(this).prev().removeClass('hidden');
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;img class="theimage" src="image_static.gif" alt=""/&gt;
  
  &lt;img class="theimage2 hidden" src="image_animated.gif" alt=""/&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.hidden{
  display:none !important;
  }
  </code></pre>
  
  <p>I am changing the class of the previous and next elements because I may have more than one GIF image on a single page, thus preventing the action of occurring for all of them.</p>
  
  <p>So far so good, the script works. What I am trying to achieve actually is for the GIF image to always start from the beginning. At the moment it only does so the first time. Then, it looks like it continues playing in the background and on the second call, it simply continues playing. Sometimes even it freezes, something to do with cache I guess.</p>
  
  <p>How can i accomplish this?</p>