javaScript动画图像onmouseover / onmouseout

Question

I have an animation (41 frames) of a door opening, I want to use javaScript to make it open onmouseover, and I want it to go back to frame 1 onmouseout. I don't think I'm doing it quite right for the onmouseout part. Thanks in advance for the help!

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

here's a link to it: http://www.reveriesrefined.com/test

Answer 1

I think this is probably more like what you want:

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

Note that it's usually more appropriate to use setInterval than setTimeout when you want a continuous animation. A global variable stores which frame we are currently viewing. resetAnimation sets the frame to zero and sets the display accordingly. startAnimation sets an interval timer that hides the old frame, increases the frame by one, and shows the new frame, every 50ms. Stop animation simply clears the interval timer and resets the animation.