Can't end jQuery fade on mouseout

I have a simple gallery style link setup using image swap on hover that I want to fade. I'm currently using `

.stop().hide().FadeTo("slow",1);` 

to fade in the image triggered by mousing over one of the links on the left, here's a test site to see what I'm talking about

testsite00.hostoi.com

I can't figure out how to get the fade to end on mouseout. I'm trying to create a seamless fade between links but the fade is repeating on mouseout. I开发者_运维知识库v'e tried a number of combinations of .stop() and .hide() but can't seem to stop the effect from executing. Any ideas? Thanks in advance.

jQuery:

$(document).ready(function() {
// Image swap on hover
$("#gallery ul li img").hover(function(){   
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''))
  function() { //mouseenter handler 
        $(this).stop().fadeTo("slow",0.5);
  }
  function (){ //mouseleave handler 
        $(this).stop().fadeTo("slow",1.0);
    }
});

HTML:

<div id="gallery">
  <img src="images/gallery/home.png" alt="" id="main-img" />
   <ul>
     <li class="home"><img src="images/gallery/thumb/home.png" alt="" /></li>
     <li class="about"><img src="images/gallery/thumb/about us.png" alt="" /></li>
     <li class="contact"><img src="images/gallery/thumb/Contact Us.png" alt="" /></li>
     <li class="services"><img src="images/gallery/thumb/Services.png" alt="" /></li>
   </ul>
</div> 

Pass true to your stop call to clear the animation cue, or true, true to clear the queue and immediately finish the animation:

.stop(true, true)

Also, you should pass two functions to your hover handler - what happens on mouseenter, then what happens on mouseleave - if you want it to reappear (or disappear - whatever the desired behavior is), that should go in the second function.

  $("#gallery ul li img").mouseenter(function(){
    var currentImg = $('#main-img').attr('src');
    var targetImg = $('this').attr('src').replace('thumb/', '');
    if (currentImg !== targetImg) {
      $('#main-img')
        .stop(true)
        .fadeTo(0,0)
        .attr('src', targetImg)
        .fadeTo('normal', 1);
    }
  });

So what this does is first check if the image being hovered over isn't already the thumbnail of the large image - no need to do the fade animation here. If it's not, then stop and clear the animation queue (to prevent animations from piling up on fast hovering), instantly fade the current large image to 0 opacity (make it invisible), change the big picture to that represented by the thumbnail, then fade the big picture in. The fade-in speed is currently set to "normal" but this can be "slow", "fast" or some millisecond value if you want to experiment with it. Gone is the hover function as you don't need any behavior on mouseleave.

Not sure but you may be running into a common misunderstanding of what mouseout really does. Due to bubbling the event also triggers on child elements which is not really intuitive.

http://www.quirksmode.org/dom/events/mouseover.html

Try mouseleave and see if that works.