I have a HTML page with three sets of images on. I want each image from each set to stay visible for 5 seconds, then fade out together and, when all three are invisible, fade back in together. Then the process begins again. I am trying to do this without using JQuery. I wrote a JavaScript to do this, and it works, but after a while strange things happen. Images stop fading out, in, or do so too soon. Here is the relevant HTML:
<body onload="HideAll(fade1Image2, fade1Image3, fade1Image4, fade2Image2,
fade2Image3, fade2Image4, fade3Image2, fade3Image3, fade3Image4);
SetVariables(4,4,4);">
<div id="fade1Image1" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/PowerStation1.jpg" alt="Power Station 1" />
</div>
<div id="fade1Image2" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/PowerStation2.jpg" alt="Power Station 2" />
</div>
<div id="fade1Image3" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/FenceLine1.jpg" alt="Fence Line 1" />
</div>
<div id="fade1Image4" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/FenceLine2.jpg" alt="Fence Line 2" />
</div>
<div id="fade2Image1" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal1.jpg" alt="LNG Terminal 1" />
</div>
<div id="fade2Image2" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal2.jpg" alt="LNG Terminal 2" />
</div>
<div id="fade2Image3" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal3.jpg" alt="LNG Terminal 3" />
</div>
<div id="fade2Image4" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal4.jpg" alt="LNG Terminal 4" />
</div>
<div id="fade3Image1" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/AirPort1.jpg" alt="Air Port 1" />
</div>
<div id="fade3Image2" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/AirPort2.jpg" alt="Air Port 2" />
</div>
<div id="fade3Image3" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/T1_Tracker.jpg" alt="TI Tracker 1" />
</div>
<div id="fade3Image4" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/Targets_Tracked_no_alarm.jpg" alt="TI Tracker 2" />
</div>
And Here is the JavaScript:
var TimeToFade = 1000.0;
var maxCount;
var count;
function SetVariables()
{
maxCount = new Array(arguments.length);
count = arguments.length + 1;
for (var x = 0; x < arguments.length; x++)
{
maxCount[x] = arguments[x];
}
}
function fade(counter)
{
var eid, countx;
for (var x = 1; x < count; x++)
{
countx = counter % maxCount[x-1];
if (countx == 0)
countx = maxCount[x-1];
eid = "fade" + x + "Image" + countx;
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;
if (x == 3)
setTimeout("animateFade(" + new Date().getTime() + ",'" + counter + "')", 33);
}
}
}
function animateFade(lastTick, counter)
{
var eid, countx;
for (var x = 1; x < count; x++)
{
countx = counter % maxCount[x-1];
if (countx == 0)
countx = maxCount[x-1];
eid = "fade" + x + "Image" + countx;
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';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
if (element.FadeState == 2 && x == count-1)
{
setTimeout(function(){fade(counter)}, 5000);
hidetext(TextBlock1, TextBlock2, Text2Block1, Text2Block2, Text3Block1, Text3Block2);
}
else if (x == count-1)
{
counter++;
fade(counter);
}
if (x == count-1)
return;
}
else if (element.FadeTimeLeft > elapsedTicks)
{
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
}
}
setTimeout("animateFade(" + curTick + ",'" + counter + "')", 33);
}
function HideAll()
{
for (var i = 0; i < arguments.length; i++)
{
arguments[i].style.opacity = 0;
arguments[i].style.filter = 'alpha(opacity = 0)';
arguments[i].FadeState = -2;
}
setTimeout(function(){fade(1)}, 5000);
}
I can't see what I have done to produce this error; any help would be greatly appreciated.
To see the code in action, click here.
This doesn't really answer the question, but I rewrote the javascript from scratch and it seems to work. So, for completeness, here it is:
var Count = new Array(1, 1, 1);
var MaxCount = new Array(8, 6, 5);
var FadeState = "out";
var FadeTime = new Array(100, 100, 100);
function Fade()
{
for (var x = 0; x < 3; x++)
{
var id = "fade" + (x+1) + "Image" + Count[x];
var element = document.getElementById(id)
if (FadeState == "out")
{
if (FadeTime[x] > 0)
{
FadeTime[x]-= 5;
element.style.filter = 'alpha(opacity = ' + FadeTime[x] + ')';
element.style.opacity = FadeTime[x]/100;
}
else
{
Count[x]++;
if (Count[x] > MaxCount[x])
Count[x] = 1;
if (x == 2)
FadeState = "back";
}
}
else
{
if (FadeTime[x] < 100)
{
FadeTime[x]+= 5;
element.style.filter = 'alpha(opacity = ' + FadeTime[x] + ')';
element.style.opacity = FadeTime[x]/100;
}
else
{
if (x == 2)
FadeState = "pause";
}
}
}
switch (FadeState)
{
case "back":
FadeState = "in";
Fade();
break;
case "pause":
FadeState = "out";
setTimeout(function(){Fade()}, 5000);
break;
default:
setTimeout(function(){Fade()}, 20);
}
}
function HideAll()
{
for (var i = 0; i < arguments.length; i++)
{
var element = document.getElementById(arguments[i]);
element.style.opacity = 0;
element.style.filter = 'alpha(opacity = 0)';
}
setTimeout(function(){Fade()}, 5000);
}