JQuery mouseleave function does not start when mouse moves quickly

Question

I have a timeline with small pins on it that, when hanging over, slide up or down, and then the inscriptions are displayed. When the mouse leaves, the header should disappear, and the pin moves back. This works, but using the code that I use, if the mouse moves too fast, it does not detect that the mouse is leaving. How can i fix this?

PS, the only reason I use mouse on / off is because I think I needed to use live () as my elements are added dynamically after the document loads.

$('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function(){ $(this).animate({ top:25 }, 200, function(){ $(this).find('.caption').stop(true, true).fadeIn(200); }); }).live('mouseleave',function(){ $(this).find('.caption').stop(true, true).delay(200).fadeOut(200,function(){ $(this).parents('li').animate({ top:30 },200); }); }); 

Answer 1

EDIT

Ok, new plan!

Try the following:

 $('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function(){ $(this).animate({ top:25 }, 200, function(){ $(this).find('.caption').stop(true, true).fadeIn(200); }); }).live('mouseleave',function(){ $(this).stop(true, true).find('.caption').stop(true, true).delay(200).fadeOut(200,function(){ $(this).parents('li').animate({ top:30 },200); }); }); 

I didn’t click that you run the animation on two separate objects! Feeling more confident about it!

Answer 2

I have seen this before. When you move the mouse fast enough, it simply moves to a new location and does not cause mouse action. here is my solution using just a bit of jQuery. Basically, while you are hanging on a pin, you need to attach the listener to a window that is looking for mouse movement and checks that you are still hanging on the pin. I don’t think you want this listener to work all the time, so I turn it off myself.

  $ (". pin"). live ("mouseenter", function (event) {
   var pin = $ (event.target);
   // show the caption
   pin.addClass ("hovered");  

   $ (window) .bind ("mousemove", function (event) {
     var target = $ (event.target);
     if (! target.hasClass ("hovered")) {
       // hide the caption      
       $ (". hovered"). removeClass ("hovered");
       $ (window) .unbind ("mousemove");
     }
   }
 }