javaScript动画图像onmouseover/onmouseout

我有一个门打开的动画（41帧），我想用javaScript在MouseOver上打开它，我想让它回到MouseOut上的第1帧。我认为我做得不太对。提前感谢您的帮助

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

HTML：
…等…（41帧）
css:
#门img{
显示：无；
}
#门img：第一个孩子{
显示：块；
}
javaScript:
函数startAnimation（）{
var frames=document.getElementById（“门”）.children；
var frameCount=frames.length；
对于（i=0；i我认为这可能更像您想要的：

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

var ti，帧=0，
frames=document.getElementById（'door'）.children；
函数resetAnimation（）{
帧=0；
帧[0]。style.display='block'；
对于（变量i=1；i=frames.length）frame=0；
frames[frame].style.display='block'；
}, 50);
}
函数stopAnimation（）{
如果（ti）{
净间隔（ti）；
ti=未定义；
}
重置动画（）；
}​

请注意，在需要连续动画时，通常使用setInterval比使用setTimeout更合适。全局变量存储当前正在查看的帧。resetAnimation将帧设置为零，并相应地设置显示。startAnimation设置一个间隔计时器，该计时器隐藏旧帧，将帧增加一倍，然后单击每50毫秒运行一次新帧。停止动画只需清除间隔计时器并重置动画。
链接返回403禁止状态stopAnimation中的for循环不应该“我似乎无法修复链接，但如果您只是将其粘贴到浏览器中，它应该可以工作。当stopAnimation中的for循环有iIt时，它将直接进入第一帧，而我没有动画。您想更改什么？我尝试了您的代码，但它不起作用。它甚至无法启动动画。我尝试了onmouseover=“startAnimation（）”onmouseout=“stopAnimation（）”我也尝试过onClick，但它并没有启动动画。知道为什么吗？我尝试了很多东西，但似乎无法让动画与您的代码配合使用。对我有效。在您的原始代码中，事件处理程序位于空div（id=“door2”）上因此，您甚至可能无法看到需要将鼠标放在上面的div？