Help with the following script 2

[stooee]

I am trying to fade in a div and then fade out a div using a coupld of links. The fade in works great, but the fade out is giving me problems. The div doesn't fade out it just dissappears. if I remove the if statement from the fadeOut function, the item fades out but the fade in link no longer works, because the div is essentially still there it's just invisible and hasn't been set to display: none. Take a look at see if you can help me straighten this out.

<script type="text/javascript">
function fadeIn(){
document.getElementById('conDiv').style.display = "block";

var ftimer = 0;
var fspeed = Math.round(1000 / 100); 
	
/*fade in our flashcontainer div*/
	for(x=0; x <= 100; x++) { 
	setTimeout("changeOpac(" + x + ",'conDiv')",(ftimer * fspeed)); 
	ftimer++;
	}
}

function fadeOut(){
var ftimer = 0;
var fspeed = Math.round(300 / 100); 
	
	/*fade in our flashcontainer div*/
	for(x = 100; x > 0; x--) {
	if(x==1){
	document.getElementById('conDiv').style.display = 'none';
	}
	setTimeout("changeOpac(" + x + ",'conDiv')",(ftimer * fspeed)); 
	ftimer++;
	}
	
}

function changeOpac(opacity, id) { 
var object = document.getElementById(id).style; 
object.opacity = (opacity / 100); 
object.MozOpacity = (opacity / 100); 
object.KhtmlOpacity = (opacity / 100); 
object.filter = "alpha(opacity=" + opacity + ")"; 
}
</script>


<div id="conDiv" style="position:absolute; top:1px; left1px; width:750px; height:500px; background-color:#666666; border:1px solid Black; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; display:none;"><a href="#" onClick="fadeOut()">Fade Out</a></div>
<a href="#" onClick="fadeIn()">Fade In</a>

 

[jaxtell]

neat problem. only an issue for me when I use ie. Here is a fix

<script type="text/javascript">
function fadeIn(){
document.getElementById('conDiv').style.display = "block";

var ftimer = 0;
var fspeed = Math.round(1000 / 100); 
    
/*fade in our flashcontainer div*/
    for(x=0; x <= 100; x++) { 
    setTimeout("changeOpac(" + x + ",'conDiv')",(ftimer * fspeed)); 
    ftimer++;
    }
}

function fadeOut(){
var ftimer = 0;
var fspeed = Math.round(1000 / 100); 
    
    /*fade in our flashcontainer div*/
    for(x = 100; x >= 0; x--) {
    setTimeout("changeOpac(" + x + ",'conDiv')",(ftimer * fspeed)); 
    ftimer++;
    }
    
}

function changeOpac(opacity, id) { 
var object = document.getElementById(id).style; 
object.opacity = (opacity / 100); 
object.MozOpacity = (opacity / 100); 
object.KhtmlOpacity = (opacity / 100); 
object.filter = "alpha(opacity=" + opacity + ")"; 
if (opacity === 0){
object.display = 'none';
}else{
object.display = 'block';
}
}
</script>


<div id="conDiv" style="position:absolute; top:1px; left1px; width:750px; height:500px; background-color:#666666; border:1px solid Black; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; display:none;"><a href="#" onClick="fadeOut()">Fade Out</a></div>
<a href="#" onClick="fadeIn()">Fade In</a>

-----------------------------------------
I cannot be bought. Find leasing information at

http://www.joshaxtell.com/

 

[stooee]

Jaxtell, THANK YOU! It works like a charm. I had tried something similar but from your example my syntax was off quite a bit.

This is a great community! I've had a couple javascript problems and both times answered within an hour.

Keep up the good work.