Forum Moderators: open
function fadeInOut(linkIn,linkOut1,linkOut2) {
var fadeIn=0;
var fadeOut=1;
for(var i = 0 ; i <10 ; i++){
window.setTimeout("document.getElementById('"+linkIn+"').style.opacity = '1' ;"' , 100);
window.setTimeout("document.getElementById('"+linkOut1+"').style.opacity = '0' ;" , 100);
window.setTimeout("document.getElementById('"+linkOut2+"').style.opacity = '0' ;" , 100);
fadeIn= fadeIn + 0.1 ;
fadeOut= fadeOut - 0.1 ;
}
}
function layer(linkIn){
var linkOut1;
var linkOut2;
if(linkIn == "index"){
linkOut1 = "profile" ;
linkOut2 = "poems" ;
fadeInOut(linkIn,linkOut1, linkOut2);
}
else if(linkIn == "profile"){
linkOut1 = "index" ;
linkOut2 = "poems" ;
fadeInOut(linkIn,linkOut1, linkOut2);
}
else if(linkIn == "poems"){
linkOut1 = "index" ;
linkOut2 = "profile" ;
fadeInOut(linkIn,linkOut1, linkOut2);
}
}
and this is the html which is calling the function
<td onclick="layer('index')" style="color:white; text-decoration:none">Home</a></td>
<td onclick="layer('profile')" style="color:white; text-decoration:none">Profile</a></td>
<td onclick="layer('poems')" style="color:white; text-decoration:none">Poems</a></td>
window.setTimeout("document.getElementById('"+linkIn+"').style.opacity = "fadeIn" ;"' , 100);
window.setTimeout("document.getElementById('"+linkOut1+"').style.opacity = "fadeOut" ;" , 100);
window.setTimeout("document.getElementById('"+linkOut2+"').style.opacity = "fadeOut" ;" , 100);
As to your question, I want to point out a few things.
1. The opacity style is defined in CSS3 (specifically the color module [w3.org...] It won't work in any current version of IE, and may or may not work in your browser of choice.
2. In your 2nd post you have "fadeIn" and "fadeOut" quoted, meaning they are string values instead of the variables that you intended to reference, so remove the surrounding quotes.
3. You are executing the setTimeout methods within a loop, with each each iteration firing the method 100ms from when it's executed in your loop. What this basically means is that all 10 iterations are going to fire basically at the same time (since iterating 10 items is probably not going to take more than 1ms). It's possible there could be SOME time difference with each iteration of the loop, but it would be single digit milliseconds. Perhaps you meant for the time value to be dynamic, like:
100 * (i + 1)
Thus, the first time through the loop it's 100 * 1, then 100 * 2, etc., up to 100 * 10, which would give you a progression over the course of 1 second in 100ms increments (roughly).
Not sure if that helps.