当鼠标快速移动时，jQuery的mouseleave函数没有被触发

Question

我有一个时间轴，上面有小图钉，当鼠标悬停在上面时，它们会向上或向下滑动，然后显示标题。当鼠标离开时，标题应该消失并且图钉回到原位。这个功能可以实现，但是使用的代码如果鼠标移动得太快，就无法检测到鼠标离开。如何解决这个问题？

顺便说一下，我之所以使用mouse enter/leave，是因为我认为需要在文档加载后动态添加元素。

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

- Sabai

---

当你说它没有检测到mouseleave-如果你用alert('test')替换mouseleave函数，这样根本不会触发吗？ - Stuart Burrows

哦，它确实有问题 :(标题只是不会淡出，图钉也不会动画 >.< - Sabai

这是为什么会发生的任何想法？ - Sabai

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

我没有注意到您正在两个不同的对象上运行动画！对此我感到更加自信了！

- Stuart Burrows

---

他们仍然会卡在“不幸的是”上。但如果我慢慢移动鼠标，他们就不会卡住了。 - Sabai

尝试将.stop(true, true).fadeIn更改为.stop().fadeIn - 这似乎已经在我的测试中纠正了行为 - 但可能会有连锁反应。 - Stuart Burrows

你真是个天才！救了我一大堆麻烦。能问一下你是怎么想到这个解决方法的吗？我知道你在find()之前加了stop()，但为什么呢？再次感谢，非常感激。 - Sabai

太好了！很高兴它起作用了！所以发生的事情是当鼠标离开元素时，动画持续时间仍然处于活动状态，假设还剩下最多190毫秒。因此，这个回调函数会在fadeOut之前运行，并且调用.stop（true，true）会删除任何排队的函数（在这种情况下是fadeOut及其回调）。因此，通过向$（this）元素添加stop（），我们防止初始回调触发！至少在我的想法中是这样工作的:D - Stuart Burrows

Answer 2

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

$(".pin").live("mouseenter", function(event) {
  var pin = $(event.target);
  // 显示标题
  pin.addClass("hovered");
 $(window).bind("mousemove", function(event) {
    var target = $(event.target);
    if (!target.hasClass("hovered")) {
      // 隐藏标题      
      $(".hovered").removeClass("hovered");
      $(window).unbind("mousemove");
    }
  }
}

- muirbot

---

感谢 muirbot 的回答，这确实帮助了我解决了其他问题。但是 Inrbob 的回答解决了本问题。 - Sabai