Fade script not working correctly

[whitefiredesigns]

I have a fadeIn/fadeOut script that I'm trying to get the bugs out of. The fade in and fade out part works, but sometimes in NS or Firefox the opacity will flicker. In IE, NS and Firefox, if you put the mouse over the div that calls the function and quick move the mouse off, the fade will stop at the step it's at. Any ideas?

var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);
function headerFadeIn(headerId)
{
if (ie5)
{
opacity = document.all[headerId].filters.alpha.opacity;
if (opacity < 75)
{
opacity += 5;
document.all[headerId].filters.alpha.opacity = opacity;
setTimeout("headerFadeIn('" + headerId + "')", 10);
}
}
if (ns6)
{
opacity = parseFloat(document.getElementById(headerId).style.MozOpacity);
if (opacity < 0.75)
{
opacity += 0.05;
document.getElementById(headerId).style.MozOpacity = parseFloat(opacity);
setTimeout("headerFadeIn('" + headerId + "')", 10);
}
}
}
function headerFadeOut(headerId)
{
if (ie5)
{
opacity = document.all[headerId].filters.alpha.opacity;
if (opacity > 0)
{
opacity -= 5;
document.all[headerId].filters.alpha.opacity = opacity;
setTimeout("headerFadeOut('" + headerId + "')", 10);
}
}
if (ns6)
{
opacity = parseFloat(document.getElementById(headerId).style.MozOpacity);
if (opacity > 0)
{
opacity -= 0.05;
document.getElementById(headerId).style.MozOpacity = parseFloat(opacity);
setTimeout("headerFadeOut('" + headerId + "')", 10);
}
}
}

[orion_rus]

Hello
i think filter.alpha.opacity was created for IE browser in NS browsers like Mozilla NS and Firefox u should use -moz-opacity=.. option, or .style.MozOpacity=.. (using CSS style)

[Bernard Marx]

er..I think that's being done!

Apparently, there is an occasional Moz bug that doesn't like the value, 1. (!)
I have seen workarounds that involve (with opac as a number):

..style.MozOpacity = Math.min(0.99,opac);

..so 1 is almost, but never quite, reached.

The rest of the problem is hard to judge without seeing how you are calling these functions. Is it a single element, or might multiple elements be using this at the same time?

[adni18]

MozOpacity is stored in decimals:

0.1 (10%)
0.2 (20%)
0.18 (18%)
0.64 (64%)
0.99 (99%)

In my experience, instead of just using 1, try eliminating the MozOpacity attribute, after it has reached 90%, since the default MozOpacity is 100%.

[edited by: adni18 at 1:15 pm (utc) on Dec. 7, 2004]

[adni18]

You can probably revise this, and make it more efficient, but this works for fading in and out, in IE, at least:

function appear()
{
document.images[0].style.zIndex=1;
}

function fadeout()
{
document.images[0].style.zIndex=2;
begin=20;
timestep=50;
setTimeout("chain(90)",begin);
begin=begin+timestep;
setTimeout("chain(80)",begin);
begin=begin+timestep;
setTimeout("chain(70)",begin);
begin=begin+timestep;
setTimeout("chain(60)",begin);
begin=begin+timestep;
setTimeout("chain(50)",begin);
begin=begin+timestep;
setTimeout("chain(40)",begin);
begin=begin+timestep;
setTimeout("chain(30)",begin);
begin=begin+timestep;
setTimeout("chain(20)",begin);
begin=begin+timestep;
setTimeout("chain(10)",begin);
begin=begin+timestep;
setTimeout("chain(0)",begin);
}

function fadein()
{
document.images[0].style.zIndex=2;
begin=20;
timestep=50;
setTimeout("chain(10)",begin);
begin=begin+timestep;
setTimeout("chain(20)",begin);
begin=begin+timestep;
setTimeout("chain(30)",begin);
begin=begin+timestep;
setTimeout("chain(40)",begin);
begin=begin+timestep;
setTimeout("chain(50)",begin);
begin=begin+timestep;
setTimeout("chain(60)",begin);
begin=begin+timestep;
setTimeout("chain(70)",begin);
begin=begin+timestep;
setTimeout("chain(80)",begin);
begin=begin+timestep;
setTimeout("chain(90)",begin);
begin=begin+timestep;
setTimeout("chain(100)",begin);
}

function chain(intege)
{
document.images[0].style.filter="alpha(opacity="+intege+")";
}

document.body.onload=new Function("makeAllGui()");

color=document.body.id.split("back")[0];

[whitefiredesigns]

the opacity never reaches 100% (100 or 1). i have it fading in from 0% to 75% and then fading out to 0% again.

i'm calling the functions with the onMouseOver and onMouseOut commands. i'm actually calling two functions at the same time. i tried calling just a single function thinking maybe that was the problem, but i still got the same bug.

onMouseOver="shiftDown('LAYER_1_ID', 'LAYER_2_ID'); headerFadeIn('LAYER_2_ID');"
onMouseOut="shiftUp('LAYER_1_ID', 'LAYER_2_ID'); headerFadeIn('LAYER_2_ID');"

LAYER_1_ID and LAYER_2_ID aren't the actual id's of the layers. i have 7 sets of layers. layer2 is the "background" layer that fades in and out. layer1 is the text layer (since opac will affect text in a layer too).

if you would like to see the script in action, you can view it here
<No URLs, thanks. See TOS [WebmasterWorld.com]>

Bernard, multiple elements use this function. I had also tried calling separate functions specific for each element, but that didn't work either.

[edited by: DrDoc at 6:53 am (utc) on Dec. 8, 2004]

[orion_rus]

hmm
may be u need to switch on ur browser detection and call different styles? the functions stays the same