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);
  // show the caption
  pin.addClass("hovered");  

  $(window).bind("mousemove", function(event) {
    var target = $(event.target);
    if (!target.hasClass("hovered")) {
      // hide the caption      
      $(".hovered").removeClass("hovered");
      $(window).unbind("mousemove");
    }
  }
}

当鼠标快速移动时，不会触发jQuery mouseleave功能

2 个答案: