jquery hover issue

Question

hi, i have mouseover issues sometimes when i move my mouse fast over links it loops for quite a while, is there a way to only loop if mouse is stil over and stop if the mouse is not.

       $('ul.display li').hover(function() {

        $('ul.display li').find('#details').hide(); // hides all deatils div before showing
        $('#light').delay('800').fadeIn("fast"); // shows div that fades out all other content.

if($.cookie("switch_thumb") =="thumb_view" || $.cookie("switch_thumb") =="null"){//checks for cookie set for display type
      $(this).find('#details').delay('900').animate({width:'toggle'}); // grow width
}else{
      $(this).find('#details').delay('900').animate({height:'toggle'}); // grow height
}


      }, function() {

           $('#light').fadeOut("fast"); // dim the light to show all content
        $('ul.display li').find('#details').hide(); //hide all details
   return false; // supposed to stop looping.

      });

Answer 1

Check out .stop() method

Answer 2

I had a similar problem once. stop() can work too, but what I did was to add a class "inmotion" to the element when starting a fade, and remove it when the fade was complete. By ignoring any hover calls when that tag was on, it made sure every action had to finish before the next could begin.