How to stop an interval animation in javaScript

Question

So I have this animation made up of 41 frames and i'm trying to get this animation to end on the last frame and stay on the last frame, and I must admit... I am very lost. any help would be WONDERFUL! thanks so much!

once I figure out how to stop the animation I also want to have it start onmouseover and revert back to frame 1 onmouseout.

html :

    <div id="door">
       <img src="images/Animation_Door/0001.png">
       <img src="images/Animation_Door/0002.png">
       <img src="images/Animation_Door/0003.png">
       ...(41 frames in total)
    </div>

css :

   #door {
    background-color:transparent;
    position:absolute;
    width:800px;
    height:700px;
    top:90px;
    left:50%;
    margin-left:-400px;
    padding:0px;
    overflow:hidden;
    cursor:pointer;
    z-index:25;
  }

  #door img{
    display: none;
  }

  #door img:first-child {
    display: block;
  }

javaScript :

var interval = setInterval("function ani()", 50);  
     setTimeout(function(){ clearInterval(interval) }, 40);

     onload = function startAnimation() { 
        var frames = document.getElementById("door").children;
        var frameCount = frames.length;
        var i = 0;
     setInterval(function ani() { 
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
     }, 50);
}

Answer 1

function startAnimation() { 
  var frames = document.getElementById("door").children;
  var frameCount = frames.length;

  for (i=0; i<41; i++) {
      setTimeout(function(){
          frames[i].style.display = "none";
          frames[i+1].style.display = "block";
      },50*i);
  }
}

Answer 2

I figured out that when it starts the for loop:

for (i=0; i<41; i++)

i<41 doesn't mean frames, but rather millisecond. that's why it was stopping at an odd place.

i<61 made it stop right at the 41st frame.

THANKS SO MUCH!!!!!!