Hey everyone,

I've got a section on my website where I have 2 images placed on top of each other when the user rollovers the image, the image ontop fades out revealing the image underneath. You can then click on this underneath image to open a fancybox window and scroll through pictures. My problem is that sometimes the fade out gets 'stuck' and after closing the fancybox window, the image reamins half faded out etc and the rollover doesn't work anymore.

here's my code:

Code:
  <script type="text/javascript" src="functions.js"></script>
  
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />  
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />


<style type="text/css" media="screen">
   .js #animators { position: relative; height: 100px}
   .js #animators div.container { position: absolute; left: 0; top: 0 
   
   }
   
#fancybox-left-ico { 
 left: 20px; 
} 

#fancybox-right-ico { 
 right: 20px; 
 left: auto; 
} 

</style>



</head>


<body>
<style type="text/css"> 
#nav .selected { opacity:1.00;}

</style>
	<div id="nav">      	
        	<a href="#home" onClick="CngClass(this);" id="hlink" style="margin-left:130px">home</a>
        	<a href="#foamo" id="flink" onClick="CngClass(this);">foamo</a>  
        	<a href="#book" id="blink" onClick="CngClass(this);">book</a>
            <a href="#portfolio" id="plink" onClick="CngClass(this);">portfolio</a>
        	<a href="#contact" id="clink" onClick="CngClass(this);">contact</a>           
      </div>
hope that makes sense, if not i'll try reiterate my problem better.

Thanks
mc