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>