La función jQuery mouseleave no se activa cuando el mouse se mueve rápidamente

Question

Tengo una línea de tiempo con pequeños alfileres que cuando se pasa el cursor hacia arriba, se desliza hacia arriba o hacia abajo y luego muestra una leyenda. Cuando el mouse se va, la leyenda debería desaparecer y el pin se mueve hacia atrás. Esto funciona, pero con el código que estoy usando, si el mouse se mueve demasiado rápido, no detecta que el mouse se vaya. ¿Cómo puedo arreglar esto?

P.S, la única razón por la que estoy usando la entrada/salida del mouse es porque creo que necesitaba usar live() ya que mis elementos se agregan dinámicamente después de cargar el documento.

$('#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

EDITAR

nuevo plan bien!

Prueba esto:

$('#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);   
    }); 
}); 

no he hecho clic que está animaciones en dos objetos separados ejecutando! ¡Sentirse más seguro acerca de este!

Answer 2

Lo he visto antes. Cuando mueves el mouse lo suficientemente rápido, simplemente se salta a un lugar nuevo y no activa la acción de mover el mouse. aquí está mi solución usando solo un poco de jQuery. Básicamente, mientras está sobre el pin, debe vincular a un oyente con la ventana que busca cualquier movimiento del mouse y verifica que aún esté sobre el pin. No creo que quieras que este oyente esté funcionando todo el tiempo, así que lo tengo que desvincular.

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