setTimeout and MozOpacity

Fade-in/out effect

[moonbather]

Hello,

I'm interested in using fade-in/out effects in Mozilla, and wrote the following with the intention that one click would start an image fading into view, reaching normal MozOpacity (1.0).

But all that happens is that one click just increases the opacity by 0.01, rather than starting the desired fade-in sequence.

<script>
<!-- 
function transopac(imageobject, opacamt)
{
 if (window.sidebar)
 {
 opacval=parseFloat(document.getElementById(imageobject).style.MozOpacity); // part of previous line
 if (opacval <= parseFloat(opacamt-0.01))
{
 {
 window.status="-moz-opacity: " + opacval;
 opacval+=0.01; 
 document.getElementById(imageobject).style.MozOpacity=""+opacval;
 } 
 }
 setTimeout("transopac("+imageobject+","+opacamt+")",50)
 }
}
// -->
</script>
<img id="limage" src="rotunda75.jpg" alt="picture" style="-moz-opacity:0.1"> <br />
<a href="javascript:transopac('limage', 1)" >fade-in</a>

Does anyone know what I'm doing wrong?

Thanks for looking.

[DrDoc]

Use setInterval instead of setTimeout.

setTimeout is a one-time occurance.
setInterval is, well, an interval of occurances :)

Then, of course, you will need some form of function to clear the interval once the element is completely faded into view.

[trifi]

Just a correction to Doc's statement, setTimeOut would be the best way to complete the fade, the problem here is not setTimeOut but the if statment is met after the first loop, which is what a setTimeout will start('calling same function) until the if or else statment stops the loop. If using setTimeOut for calling the same function you should avoid using setInterval, because you do not have to end the interval preventing a chance for conituous loop in clients browser and wasting space.
----Change the if statment(opacity < 1.0) so the function will continue unless opacity is = or > 1.0-------------

[DrDoc]

Hey, you're right! Now that you brought it to my attention, I can do nothing but agree. :)
I read the code wrong...

[moonbather]

DrDoc, trifi, thank you for your observations.

I read up a bit on setInterval at evolt, and have tried various versions with/without setTimeout, but I still can't get the thing to work properly.

[trifi]

This will fade-in image for IE, Mozilla/Netscape and Mac. I placed dashes to separate the Mozilla if statment.
Hope this helps!

function FadeIn(el)
{
if(ie)
{

if (el.filters.alpha.opacity < 100)
{

el.filters.alpha.opacity=el.filters.alpha.opacity+15;
setTimeout("FadeIn(document.getElementById('"+el.id+"')",40);
return;
}
}

--------if(ns6¦¦ns7)---------------------------------------
{

if (el.style.MozOpacity < 1)
{

el.style.MozOpacity=el.style.MozOpacity+0.2;
setTimeout("FadeIn(document.getElementById('"+el.id+"')",40);
return;
}
}
------------------------------------------------------------
if(saf)
{

if (el.style.KhtmlOpacity < 1)
{

el.style.KhtmlOpacity=el.style.KhtmlOpacity+0.2;
setTimeout("FadeIn(document.getElementById('"+el.id+"')",40);
return;
}
}

}

[moonbather]

trifi, I couldn't get that to work, but I appreciate your efforts.

I will keep working on this.