Weird double blink problem during fade in

[manu3d]

Hi everybody!

I'm trying to put the icing on a cake
but I'm having one final problem.

The cake is actually a fadeIn function
that takes in input an element id(in my
case a <DIV> block) and a maximum opacity
parameter.

The element fades in correctly and reaches
the desired opacity. So we could say that
the function is doing the right thing.

Unfortunately, from a purely visual point
of view, -IF- the maximum opacity is set
to 1.0, there seem to be a brief "double flash"
just before the full opacity is reached.

That is: if I print out the values of the
opacity for each iteration of the function
I get what I would expect:

0.5, 0.6, 0.7, 0.8, 0.9, 1.0

but the following sequence of values
better describes -what I see-:

0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 0.0, 1.0

Notice that the length of the "0.0" flash
remains the same even if I increase the
milliseconds in the setTimeout() call.

It almost looks like some kind of browser
rendering problem rather than a scripting
issue.

Can anybody confirm my hypothesis?

Thanks in advance for your help!

Sincerely,

Manu


P.S. This is the code of the fade-in function I wrote,
together with its sibling fade-out, for completeness
and for anybody to use (although it's only Mozilla
compatible at this point...)

----
var fadeInTO, fadeOutTO;

function layer_fadeIn(layerName, maxOpacity)
{
clearTimeout(fadeOutTO);
myOpacity = document.getElementById(layerName).style.opacity;

if(myOpacity < maxOpacity)
{
myOpacity -= -0.10;
document.getElementById(layerName).style.opacity=myOpacity;


var cmd2run="layer_fadeIn('"+layerName+"',"+maxOpacity+")";
var fadeSpeed=500;
fadeInTO=setTimeout(cmd2run,fadeSpeed);
}
}

function layer_fadeOut(layerName, maxTransparency)
{
clearTimeout(fadeInTO);
myOpacity = document.getElementById(layerName).style.opacity;

if(myOpacity > maxTransparency)
{
myOpacity -= 0.10;
document.getElementById(layerName).style.opacity=myOpacity;

var
cmd2run="layer_fadeOut('"+layerName+"',"+maxTransparency+")";
var fadeSpeed=10;
fadeOutTO=setTimeout(cmd2run,fadeSpeed);
}
}

 

[cjl]

Manu3d:

...there seem to be a brief "double flash"
just before the full opacity is reached.

Check out the comment at the end of:
http://www.brainerror.net/scripts_js_blendtrans.php

The double flash occurs in Firefox, and it seems that a workaround
might be to never actually get to an opacity of 100.

I'll bet that most (all) people can't tell the difference between and
opacity of 99 and an opacity of 100.

-CJL

 

[manu3d]

CJL, thanks for your reply. I tried the suggested method but
it didn't work. -However- it got me thinking, and I think it
helped me to find a bit of a "design" flaw in my fade-in
routine (which is why the method you pointed me to didn't work).
I therefore rewrote it and it's now working perfectly fine if we
close an eye on the fact that it reaches an opacity of "only"
0.999999. =)

This is the rewritten routine, for anybody to use:

var fadeInTO, fadeOutTO;

function layer_fadeIn(layerName,maxOpacity)
{
clearTimeout(fadeOutTO);
myOpacity = document.getElementById(layerName).style.opacity;

if(myOpacity < maxOpacity)
myOpacity -= -0.10;
else
return;

if(myOpacity < 1.0)
{
document.getElementById(layerName).style.opacity=myOpacity;
}
else
{
document.getElementById(layerName).style.opacity=0.999999;
return;
}

var cmd2run="layer_fadeIn('"+layerName+"',"+maxOpacity+")";
var fadeSpeed=10;
fadeInTO=setTimeout(cmd2run,fadeSpeed);

}

CJL, thanks for your help!

Ciao ciao!

Manu