Looped and timed javascipt fade of multiple div's in order

Hi,
I’ve found this great script but I was unable to change it to fit my needs. What this script does is it fades the box to opacity .3 on click of the btn and back to 1.0 when click again. What I need is for 4 or 5 divs to fade one after the other as soon as the page loads. So no more “go” button, all images are set to an initial opacity of .3 and one after the other they go to 1.0, stay there for 3 seconds, then go back to .3.

Here’s the script I found.
Thanks in advance for the help.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<title></title>
<meta http-equiv=“Content-Type” content=“texthtml;charset=utf-8” />
<script type=“text/javascript”>
var TimeToFade = 1000.0;

function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;

if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ‘’
|| element.style.opacity == ‘1’)
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}

if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout(“animateFade(” + new Date().getTime() + “,'” + eid + “')”, 33);
}
}

function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;

var element = document.getElementById(eid);

if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? ‘1’ : ‘0.3’;
element.style.filter = 'alpha(opacity = ’
+ (element.FadeState == 1 ? ‘100’ : ‘30’) + ‘)’;
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
}

element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;

newOpVal = newOpVal/2 + 0.3;
element.style.opacity = newOpVal;
element.style.filter =
'alpha(opacity = ’ + (newOpVal*100) + ‘)’;

setTimeout(“animateFade(” + curTick + “,'” + eid + “')”, 33);
}

</script>

</head>
<body onload=“fade(‘fadeBlock’);”>

<div id=“fadeBlock” style=“background-color:Lime;width:250px;
height:65px;text-align:center;”>
<br />
I’m Some Text
</div>
<br />
<br />
<input type=“button” onclick=“fade(‘fadeBlock’);” value=“Go” />

</body>
</html>

Here is a script that does what you want. It is not your original script, but it works in all browsers. You can change the dwell times at the top of the script.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Fade divs</title>
<script type=“text/javascript”>
<!–
// opacity value is 0-1 for non-IE and 0-100 for IE
var count=0, tOut=null, stepF=2, fadeTop=100, fadeBot=30, final=false, aPause=1000, fadePause=50; // global
//
function startChange()
{ clearTimeout(tOut);
++count;
if(count >=((fadeTop-fadeBot)/stepF)+1)
{ if(final==false)
{ // after increasing opacity, now decrease after 3sec
increasing=false; count=0; final=true;
tOut=setTimeout(startChange,aPause) // wait 3 sec
return;
}
else
{ // move to next div
++currentDivRef;
if(currentDivRef<allTopDivs.length)
{ increasing=true; currentOpacity=fadeBot; count=0; final=false;
tOut=setTimeout(startChange,aPause);
}
return;
}
}
// change opacity of target div
currentOpacity=(increasing==true)? currentOpacity+stepF : currentOpacity-stepF;
if(increasing==true)
{ currentOpacity=(currentOpacity >=fadeTop)?fadeTop : currentOpacity; }
else
{ currentOpacity=(currentOpacity <=fadeBot)?fadeBot : currentOpacity; }
if(isIE==true)
{ allTopDivs[currentDivRef].style.filter = ‘alpha(opacity=’+currentOpacity+‘)’; } // IE opacity value reqd is 0-100
else
{ allTopDivs[currentDivRef].style.opacity = currentOpacity/100; } // not IE opacity value reqd is 0-1
//
tOut=setTimeout(startChange,fadePause)
}
// ------------------ end of startChange() -------------------------------------
//
var allTopDivs=new Array(), isIE=false, currentDivRef, currentOpacity, increasing; // global
window.onload=function(){
// get div object refs
var allDivs=document.getElementsByTagName(“div”);
var i;
// collect divs with class topDivs
for(i=0;i<allDivs.length;i++)
{ if(allDivs[i].className==“topDivs”){ allTopDivs[allTopDivs.length]=allDivs[i]; }
}
// check for user agent type. IE first
if(typeof allTopDivs[0].style.opacity==“undefined” && navigator.userAgent.indexOf(“MSIE”)!= -1) // check for IE
{ // IE opacity value reqd is 0-100
// set initial opacity for all divs
for(i=0;i<allTopDivs.length;i++){ allTopDivs[i].style.filter = ‘alpha(opacity=30)’; } // visible 30%
isIE=true; // flag IE as browser
}
else if(typeof allTopDivs[0].style.opacity==“string” && navigator.userAgent.indexOf(“MSIE”)== -1) // check for not IE
{ // not IE opacity value reqd is 0.0-1.0
// set initial opacity for both divs
for(i=0;i<allTopDivs.length;i++){ allTopDivs[i].style.opacity = 0.3; } // visible 30%
isIE=false; // flag IE is not browser
}
// start opacity change for first div. currentDivRef is index value in allTopDivs array
currentDivRef=0;
// use IE method and change later
currentOpacity=30;
// start by increasing opacity
increasing=true;
// start timeout
tOut=setTimeout(startChange,aPause)
}
//–>
</script>
<style type=“text/css”>
<!–
.topDivs { float:left; margin:5px ; width:100px; height:100px; border:2px solid #000; }
#d1 { background-color:#F00; }
#d2 { background-color:#0F0; }
#d3 { background-color:#00F; }
#d4 { background-color:#FF0; }
#d5 { background-color:#F0F; }

–>
</style>
</head>

<body>

<div id=“d1” class=“topDivs”>
</div>
<div id=“d2” class=“topDivs”>
</div>
<div id=“d3” class=“topDivs”>
</div>
<div id=“d4” class=“topDivs”>
</div>
<div id=“d5” class=“topDivs”>
</div>

</body>

</html>