Javascript Fade producing unexpected results

StackOverflow https://stackoverflow.com/questions/12485048

  •  02-07-2021
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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);
}

OTHER TIPS

You need to put quotes around the ids, when you call the HideAll method

HideAll('fade1Image2', 'fade1Image3', 'fade1Image4', 'fade2Image2',
'fade2Image3', 'fade2Image4', 'fade3Image2', 'fade3Image3', 'fade3Image4')

And you need to actually find the elements before setting their styles..

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)';
    element.FadeState = -2;
}
setTimeout(function(){fade(1)}, 5000);
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top