javaScript動畫圖像onmouseover/onmouseout

Question

我有一個開門的動畫（41幀），我想用javaScript打開onmouseover，並且我想讓它回到第1幀onmouseout。我認爲我沒有做到這一點。先謝謝您的幫助！

HTML: 
    <div onmouseover="startAnimation()" onmouseout="stopAnimation()" id="door2"></div> 
    <div id="door"> 
    <img src="images/Animation_Door/0001.png"> 
    <img src="images/Animation_Door/0002.png"> 
    <img src="images/Animation_Door/0003.png"> 
    ...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<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<1; i++){ 
    setTimeout(function(){ 
    frames[++i % frameCount].style.display = "none"; 
    frames[i % frameCount].style.display = "block"; 
    }, 50*i); 
    } 
    } 

這裏有一個鏈接： http://www.reveriesrefined.com/test

Answer 1

我覺得這可能是更喜歡你想要什麼：

var ti, frame = 0, 
frames = document.getElementById('door').children; 

function resetAnimation() { 
    frame = 0; 
    frames[0].style.display = 'block'; 
    for (var i = 1; i < frames.length; i++) { 
     frames[i].style.display = 'none'; 
    } 
} 
function startAnimation() { 
    console.log('start animation'); 
    resetAnimation(); 
    ti = setInterval(function() { 
     frames[frame].style.display = 'none'; 
     frame ++; 
     if (frame >= frames.length) frame = 0; 
     frames[frame].style.display = 'block'; 
    }, 50); 
} 
function stopAnimation() { 
    if (ti) { 
     clearInterval(ti); 
     ti = undefined; 
    } 
    resetAnimation(); 
}​ 

注意，它通常是更合適的比的setTimeout使用的setInterval當你想要一個連續的動畫。全局變量存儲我們當前正在查看的幀。 resetAnimation將幀設置爲零並相應地設置顯示。 startAnimation會設置一個隱藏舊幀的間隔計時器，將幀增加一個，並每隔50ms顯示一個新幀。停止動畫只是清除間隔計時器並重置動畫。