jQuery mouseleave function isn't being triggered when mouse moves quickly

Question

I have a timeline with little pins on it which when hovered over, slide up or down and then display a caption. When the mouse leaves, the caption should disappear and the pin moves back. This works, but with the code I am using, if the mouse moves too quickly, it doesn't detect the mouse leave. How can I fix this?

P.S, the only reason I am using mouse enter/leave 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

Okay new plan!

Try this:

$('#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 are running animations on two separate objects! Feeling more confident about this one!

Answer 2

I've seen this before. When you move the mouse fast enough, it just skips over to a new place and doesn't trigger the mouseleave action. here's my solution using just a little bit of jQuery. Basically, while you are hovering on the pin, you need to bind a listener to the window that looks for any mouse movement and checks that you are still hovering on the pin. I dont' think you'd want this listener running all the time, so I have it unbind itself.

$(".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");
    }
  }
}