Hey everyone,

I always struggle with Javascript, I am trying to create an animation for a website. When the page loads, a div section covers the main page and after five seconds, the elements within it are to slide to either side and then the div is to dissolve and expose the main page.

3 variables keep creating errors: imgDiv, introCap, & introDiv; all reading null even though I have defined them at the beginning of my script.

here is my script:

var wait = 5000;
var introCap = document.getElementById("captionCol");
var imgDiv = document.getElementById("imgCol");
var introDiv = document.getElementById("intro");

function splitDivs() {
var goLeft;
var goRight;

goLeft += ((goLeft--)-0.9);
goRight += ((goRight++)+0.9);

imgDiv.style.left = parseInt('imgDiv.style.left')+ goLeft + "%";
introCap.style.left = parseInt('introCap.style.left')+ goRight + "%";
}

function init() {
var id = setInterval(splitDivs, 10);

imgDiv.style.left = "15%";
introCap.style.left = "45%";
setTimeout("splitDivs()", wait);
splitDivs();
}
document.addEventListener("DOMContentLoaded", init, false);


here is the HTML portion:

<div id="intro">

<div id="imgCol"></div> <!-- The image within this div is embed in a css file as the background. -->

<div id="captionCol">
<p> Hi, I'm <b>Jenny Spring</b>. <br><br>
I'm a <span id="emp">SPIN</span> farmer. </p>

</div>
</div>


I am confused as to why it is declaring my variables as null, when they are defined above at the beginning. I figured they were declared as global variables so their scope should be the entire script. I am using firebug to debug/test my script.

Thanks!