当鼠标快速移动时，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);         
    });
});

我没有点击你在两个独立的对象上运行动画！对这个更有信心！

Answer 2

我以前见过这种情况。当你移动鼠标足够快时，它只是跳到一个新的地方，不会触发mouseleave操作。这是我只使用一点点jQuery的解决方案。基本上，当您将鼠标悬停在pin上时，您需要将侦听器绑定到窗口，以查找任何鼠标移动并检查您是否仍在pin上悬停。我不认为你会希望这个监听器一直在运行，所以我让它自己解除绑定。

$（".pin"）.live（"mouseenter"，function（event）{var pin=$（event.target）；//显示标题pin.addClass（"悬停"）；$（window）.bind（"mousemove"，function（event）{var target=$（event.target）；if（！target.hasClass（"悬停"））{//隐藏标题$（".havered"）.removeClass（"hovered"）；$（window）.unbind（"mousemove"）；}}}