Gradually fade in trouble. (Not the one from DD)

Single Paradox

08-18-2005, 01:14 AM

here is my code:

<html>
<head>
<script>

var Timer1;
var Timer2;
var google1=10;
var google2=10;

function fadeIn(ID,which,which2){
if(which2*2<=80){
clearTimeout("Timer"+which);
document.getElementById(ID).filters.alpha.opacity=which2*2;
which2++;
window.status=document.getElementById(ID).filters.alpha.opacity;
window["Timer"+which]=setTimeout(function() {fadeIn(ID,which,which2)},0);
}else{
clearTimeout("Timer"+which);
}
}
function fadeOut(ID,which,which2){
if(which2*2>=20){
clearTimeout("Timer"+which);
document.getElementById(ID).filters.alpha.opacity=which2*2;
which2--;
window.status=document.getElementById(ID).filters.alpha.opacity;
window["Timer"+which]=setTimeout(function() {fadeOut(ID,which,which2)},0);
}else{
clearTimeout("Timer"+which);
}
}
</script>
</head>
<body onload="window.status=document.getElementById('fade1').filters.alpha.opacity;" background="http://www.singleparadox.com/images/bg.gif">
<br><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<div id="fade1" onmouseover="fadeIn(this.id,1,google1)" onmouseout="fadeOut(this.id,1,google1);" style="filter:alpha(opacity=20);border:1px solid black;height:100px;width:500px;background:blue;">
Some Text Some Text Some Text
</div><br>
<div id="fade2" onmouseover="fadeIn(this.id,2,google2)" onmouseout="fadeOut(this.id,2,google2);" style="filter:alpha(opacity=20);border:1px solid black;height:100px;width:500px;background:blue;">
Some Text Some Text Some Text
</div>
</body>
</html>

It is in internet explorer only at this time because I want to get it working before I solve X-browser things. I have two problems with this code. One is that it doesn't fade out, it just goes straight to 20% opacity. The other problem is that when I move my mouse over one div and then over the other really quick, the first div doesn't fade out (or at least go straight to 20%). Because I am using different variables each time the functions are called, shouldn't it not clash with a seperate calling of the function? Did I reference the variables to be called incorrectly?

In short I want it to work just like the code shown here: http://www.dynamicdrive.com/dynamicindex4/highlightgrad2.htm

But I am stubborn and proud and I don't want to copy another code.

Single Paradox

08-18-2005, 04:57 AM

Can anyone help me please? It must be in the setTimeout and clearTimeout variables because everything else works fine. Am I referencing them wrong?

Single Paradox

08-18-2005, 05:38 AM

Never mind, I fixed it!! Here is the code:

<html>
<head>
<script>

var Timer1;
var Timer2;

function fadeIn(ID,which){
if(document.getElementById(ID).filters.alpha.opacity<=80){
clearTimeout("Timer"+which);
document.getElementById(ID).filters.alpha.opacity+=5*1;
window.status=document.getElementById(ID).filters.alpha.opacity;
window["Timer"+which]=setTimeout(function() {fadeIn(ID,which)},0);
}else{
clearTimeout("Timer"+which);
}
}
function fadeOut(ID,which){
if(document.getElementById(ID).filters.alpha.opacity>=20){
clearTimeout("Timer"+which);
document.getElementById(ID).filters.alpha.opacity+=5*-1;
window.status=document.getElementById(ID).filters.alpha.opacity;
window["Timer"+which]=setTimeout(function() {fadeOut(ID,which)},0);
}else{
clearTimeout("Timer"+which);
}
}
</script>
</head>
<body onload="window.status=document.getElementById('fade1').filters.alpha.opacity;" background="http://www.singleparadox.com/images/bg.gif">
<br><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<div id="fade1" onmouseover="fadeIn(this.id,1)" onmouseout="fadeOut(this.id,1);" style="filter:alpha(opacity=20);border:1px solid black;height:100px;width:500px;background:blue;">
Some Text Some Text Some Text
</div><br>
<div id="fade2" onmouseover="fadeIn(this.id,2)" onmouseout="fadeOut(this.id,2);" style="filter:alpha(opacity=20);border:1px solid black;height:100px;width:500px;background:blue;">
Some Text Some Text Some Text
</div>
</body>
</html>

Single Paradox

08-18-2005, 05:39 AM

Hmm, actually I have come across another problem, when I move my mouse over one of them and move it out before it gets to 80 opacity, it stops and flickers a little.