Hiding/Showing Div Elements

This should cycle through the <div> tags, but it isn't even showing the first one. It should show a "0", then 50ms later, show "1", then "2", and then "3". I get nothing.

Here's the HTML:

<div class="header" id="animation">
<div id="aniObj0" style="display: none;" onLoad="runAnimation开发者_如何转开发();">0</div>
<div id="aniObj1" style="display: none;">1</div>
<div id="aniObj2" style="display: none;">2</div>
<div id="aniObj3" style="display: none;">3</div>
</div>

The JavaScript:

var aniNum = 0;
var animationDelay = 50;
var frameDelay = 50;

function runAnimation()
{
    Console.log("runningAnimation");
    var prevObj = document.getElementById('aniObj' + (aniNum - 1));
    var aniObj = document.getElementById('aniObj' + aniNum);
    if(aniObj != null){
        if(prevObj != null){
            aniObj.style.display = 'none;';
        }
        aniObj.style.display = 'block;';
        aniNum++;
        if(aniNum == 0){
            setTimeout("runAnimation();", animationDelay);
        }else{
            setTimeout("runAnimation();", frameDelay);
        }
    }else{
        aniNum = 0;
        newAnimation();
    }
}

You're very close. See code below (and comments in code).

HTML:

<div class="header" id="animation">
    <!-- Removed onload="runAnimation()" - onload doesn't exist for a div -->
    <div id="aniObj0" style="display: none;">0</div>
    <div id="aniObj1" style="display: none;">1</div>
    <div id="aniObj2" style="display: none;">2</div>
    <div id="aniObj3" style="display: none;">3</div>
</div>

JavaScript:

var aniNum = 0;
var animationDelay = 500; //Changed to 500ms to you could see better
var frameDelay = 500; //Changed to 500ms to you could see better

function runAnimation()
{
    var prevObj = document.getElementById('aniObj' + (aniNum - 1));
    var aniObj = document.getElementById('aniObj' + aniNum);

    if (aniObj != null) {
        if (prevObj != null) {
            aniObj.style.display = 'none;';
        }
        aniObj.style.display = '';
        aniNum++;
        if (aniNum == 0) {
            //Changed setTimeout("runAnimation()", animationDelay); to 
            //setTimeout(runAnimation, animationDelay);
            setTimeout(runAnimation, animationDelay);
        } else {
            setTimeout(runAnimation, frameDelay);
        }
    } else {
        aniNum = 0;
        newAnimation();
    }
}

//You need to place this in a valid event. onload event of the body maybe?
runAnimation();

Here's a working fiddle.