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);
});
});