title: javaScript Animating Images onmouseover/onmouseout
body: <p>I have an animation (41 frames) of a door opening, I want to use javaScript to make it open onmouseover, and I want it to go back to frame 1 onmouseout. I don't think I'm doing it quite right for the onmouseout part. Thanks in advance for the help!</p>
  
  <pre><code>HTML:
      &lt;div onmouseover="startAnimation()" onmouseout="stopAnimation()" id="door2"&gt;&lt;/div&gt;
      &lt;div id="door"&gt;
      &lt;img src="images/Animation_Door/0001.png"&gt;
      &lt;img src="images/Animation_Door/0002.png"&gt;
      &lt;img src="images/Animation_Door/0003.png"&gt;
      ...etc...(41 frames)
  
  css:
      #door img{
      display: none;
      }
  
      #door img:first-child {
      display: block;
      }
  
  javaScript:
      function startAnimation() { 
      var frames = document.getElementById("door").children;
      var frameCount = frames.length;
  
      for (i=0; i&lt;41; i++) {
      setTimeout(function(){
      frames[i % frameCount].style.display = "none";
      frames[++i % frameCount].style.display = "block";
      }, 50*i);
      }
      }
  
      function stopAnimation() {
      var frames = document.getElementById("door").children;
      var frameCount = frames.length;
  
      for (i=0; i&lt;1; i++){
      setTimeout(function(){
      frames[++i % frameCount].style.display = "none";
      frames[i % frameCount].style.display = "block";
      }, 50*i);
      }
      }
  </code></pre>
  
  <p>here's a link to it:
  <a href="http://www.reveriesrefined.com/test" rel="nofollow">http://www.reveriesrefined.com/test</a></p>