Fading In Layer

[meta_tag]

Hi,

I am new to javascript so take it easy on me and explain whats going on here if you can. Basically its a roll over on mouse on i want it to fade in a layer. the two roll overs are on seperate layers. My code works fine if it is only fading in but when I add additional code to fade out on mouse out. It doesnt work right.

This is my code:

ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
var opac = 0;
var opac2 = 100;

function fadeIn() {
document.test.style.visibility = "visible";
if(opac != 100){
opac+=15;
if(ie5) document.getElementById('test').filters.alpha.opacity = opac;
if(ns6) document.getElementById('test').style.MozOpacity = opac/100;
setTimeout('fadeIn()', 79);
}
}

function fadeOut() {
if(opac2 > 0){
opac2-=1;
if(ie5) document.getElementById('test').filters.alpha.opacity = opac2;
if(ns6) document.getElementById('test').style.MozOpacity = opac2/100;
setTimeout('fadeOut()', 50);
}
}

I am new to this and I am trying to learn, any help would be great.

Thanks

meta_tag

[meta_tag]

http://web-design-stirling.co.uk/test/ is the link and you can see whats going wrong. Roll over the top button on the menu it fades in fine but on the roll out it messes up.

Anyhelp would be great

Chance

[ccattell]

try this out

ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
var opac = 0;
var opac2 = 100;
function fadeIn() {
opac2 = 100;
if(opac != 100){
opac+=10;
if(ie5) document.getElementById('test').filters.alpha.opacity = opac;
if(ns6) document.getElementById('test').style.MozOpacity = opac/100;
setTimeout('fadeIn()', 79);
}
}

function fadeOut() {
opac = 0;
if(opac2 != 0){
opac2-=10;
if(ie5) document.getElementById('test').filters.alpha.opacity = opac2;
if(ns6) document.getElementById('test').style.MozOpacity = opac2/100;
setTimeout('fadeOut()', 79);
}
}

[meta_tag]

Thank you, I dont like to seem like a pest but I am knew to javascript. That worked perfect. Thank you.


Chance Hoggan

[meta_tag]

It still has a little glitch in it somehow. It would seem that if the opicty fade has not completed it and the mouse moves off it creates a problem. I will mabye have to write a bit of code to make it fade out or in from where it has already started.

Any guidence here would be good.

It has been uploaded and you can see my new problem.

I will go do some research myself aswell.

http://web-design-stirling.co.uk/test/

[ccattell]

The glitch is because both scripts are trying to run at once and the two are cancelling each other out, you need to stop one script and start the other to make it work properly.....still working on that one! :)

I'm still pretty new at this too

[meta_tag]

Thanks, I am very knew to javascript. I have done a little proggraming before but not much. I think it would be nice if it could remeber how far thru the fade in got before the mouse moved and decrease on the fade out from that value and vis versa. Just need to learn a little more javascript first.

Chance Hoggan

[meta_tag]

I dont think I need 2 varibles to handle the opicity. Surely one would be able to handle it.

Chance

[meta_tag]

If anyone else has any ideas, help or advice they could offer me it would me great.