I'm using Jquery to create a rollover effect on 2 images (placed on top of each other) to fade the bottom image in on a mouseover and out on a mouse out. Clicking the faded in image also opens a fancybox gallery. The problem is that sometimes the animation (the fade in and out) gets stuck after closing the fancybox window and the mouseover doesn't work anymore.

here's my code for the mouseover:

2. $(document).ready(function(){
3.   $(".appearing-image img").css("opacity",0).fadeTo(500, 0);
4. $(".appearing-image img").mouseover(function () 
6. {
7. if ($(this).is(':animated'))
8. {
9. $(this).stop().fadeTo(250,1);
10. }
11. else
12. {
13. $(this).fadeTo(250, 1);
14. }
16.      
17.     });
18. $(".appearing-image img").mouseout(function () {
19.      if ($(this).is(':animated'))
20. {
21. $(this).stop().fadeTo(250,0);
22. }
23. else
24. {
25. $(this).fadeTo(250, 0);
26. }
27.     });

and here's my html code:

2. <div class="thumbnail" style="margin-top:1%; ">
3.     <div class="visible-image">
4. <img src="images/projectslabel.jpg" />
5. </div> 
6.          <div class="appearing-image">
7.          <img onclick='$("a.projects:first").trigger("click");' src="images/projects.jpg" />
8.                               </div>
9. </div>

this has been giving me hastles for weeks now.

any help would be awesome!!

Dan