如何停止jQuery悬停泛滥？

Question

I have a problem with my "menu" items that have an image, and by hovering them, jQuery brings out a text and a description for that image. However, I could not find any way to block or stop this effect from flooding.

See the example , from this try moving your cursor around the four boxes, fast, you will see that they kind of queue, and I don't really want that to happen.

This is my jQuery code:

$(document).ready(function() {  
    $("[rel='tooltip']").tooltip();    
    if($("#editor").val()!="1")
    {
        $('.thumbnail').hover(
            function(){
              $(this).find('.caption').fadeIn(450)
         },
         function(){
               $(this).find('.caption').fadeOut(800)
         }
     }); 
});

Ways to stop this?

Answer 1

Try adding .stop() ( jQuery API reference ) to your selector. It will cancel an ongoing animation

$(this).find('.caption').stop().fadeIn(450)