当鼠标快速移动时，jQuery mouseleave 函数不会被触发

Question

我有一个时间轴，上面有小针，当鼠标悬停在其上时，向上或向下滑动，然后显示标题。当鼠标离开时，标题应该消失并且图钉会移回。这是可行的，但是对于我正在使用的代码，如果鼠标移动太快，它不会检测到鼠标离开。我该如何解决这个问题？

P.S，我使用鼠标进入/离开的唯一原因是因为我认为我需要使用 live()，因为我的元素是在文档加载后动态添加的。

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

编辑

好的新计划!

试试这个:

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

我没有点击您正在两个单独的对象上运行动画!对此感到更加自信!