468,532 Members | 1,637 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,532 developers. It's quick & easy.

Weird double blink problem during fade in

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=m yOpacity;
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=m yOpacity;

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

Oct 23 '05 #1
2 1488
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

Oct 24 '05 #2
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=m yOpacity;
}
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

Oct 24 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

14 posts views Thread by Ivan Weiss | last post: by
4 posts views Thread by Chris Lieb | last post: by
10 posts views Thread by Sigmathaar | last post: by
2 posts views Thread by Bhan | last post: by
2 posts views Thread by Emil | last post: by
5 posts views Thread by robinsiebler | last post: by
4 posts views Thread by Charles Packer | last post: by
3 posts views Thread by E11esar | last post: by
7 posts views Thread by semomaniz | last post: by
1 post views Thread by fmendoza | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.