Welcome to WebmasterWorld Guest from 3.209.80.87

Forum Moderators: open

Message Too Old, No Replies

setTimeout and MozOpacity

Fade-in/out effect

     
4:08 am on Dec 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 13, 2003
posts:44
votes: 0


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.

4:12 pm on Dec 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


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.

4:33 pm on Dec 1, 2003 (gmt 0)

New User

10+ Year Member

joined:Nov 24, 2003
posts:20
votes: 0


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-------------
4:58 pm on Dec 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Hey, you're right! Now that you brought it to my attention, I can do nothing but agree. :)
I read the code wrong...
3:56 pm on Dec 3, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 13, 2003
posts:44
votes: 0


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.

5:12 pm on Dec 3, 2003 (gmt 0)

New User

10+ Year Member

joined:Nov 24, 2003
posts:20
votes: 0


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

}

10:23 pm on Dec 8, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 13, 2003
posts:44
votes: 0


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

I will keep working on this.