鼠标快速移动时不会触发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").live("mouseenter", function(event) {
  var pin = $(event.target);
  // 显示标题
  pin.addClass("悬停");

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