Tenho uma linha do tempo com pequenos pinos que, quando passam o mouse, deslizam para cima ou para baixo e exibem uma legenda. Quando o mouse sai, a legenda deve desaparecer e o alfinete se move para trás. Isso funciona, mas com o código que estou usando, se o mouse se move muito rapidamente, ele não detecta a saída do mouse. Como posso consertar isso

P.S, a única razão pela qual estou usando o mouse enter / leave é porque acho que precisava usar live (), pois meus elementos são adicionados dinamicamente após o carregamento do document

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