如何在javaScript中停止間隔動畫

Question

所以我有這個動畫由41幀組成，我試圖讓這個動畫在最后一幀結束並保持在最后一幀，我必須承認......我很失落。 任何幫助都將是美妙的！ 非常感謝！

一旦我弄清楚如何停止動畫我也想讓它從onmouseover開始並恢復到第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

我發現當它啟動for循環時：

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

i <41並不意味着幀，而是毫秒。 這就是為什么它停在一個奇怪的地方。

我<61讓它停在第41幀。

非常感謝！！！！！！