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:
<style type="text/css" media="screen">
   .js #animators { position: relative; height: 100px}
   .js #animators div.container { position: absolute; left: 0; top: 0

</style>

  <script type="text/javascript">

    document.documentElement.className += " js"; // Add js class to the HTML element
    $(function(){
      var $containers = $("#animators > div").hide();
	  
      $('#show').show();

      $('tr td a.c').each(function(i,el){
        var idx = i;
        $(this).click(function(e){
          var $target = $containers.filter(':eq(' + idx + ')');
          if($containers.filter(':visible').not($target).length){
            $containers.filter(':visible').fadeOut();
          }
          $target.not(':visible').fadeIn();
          e.preventDefault();
        })
      })
    });
</script>

<div class="thumbnail" style="margin-top:5%; margin-right:2%;">
	    			<div class="visible-image">
						<img src="images/illustrationslabel.jpg" />
					</div> 
        			<div class="appearing-image"><img onclick='$("a.illustrations:first").trigger("click");' src="images/illustrations.jpg" />
        			</div>
   				</div>
thanks

mc