如何停止在javaScript中的間隔動畫

所以我有這個動畫組成的41幀，我試圖讓這個動畫結束在最後一幀，並留在最後一幀，我必須承認...我很迷茫。任何幫助都會很好！非常感謝！如何停止在javaScript中的間隔動畫

一旦我找出如何停止動畫，我也希望它開始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); 
}

來源

2012-12-01 user1868086

你的var我需要移出一個循環。不要做++我，而只是使用i + 1 – ryadavilli

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); 
    } 
}

來源

2012-12-01 06:13:43

我想通了，當它開始for循環：

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

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

i < 61使它在第41幀停止。

非常感謝!!!!!!

來源

2012-12-01 09:00:18 user1868086

如何停止在javaScript中的間隔動畫

回答

相關問題