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显示一个新帧。停止动画只是清除间隔计时器并重置动画。