当鼠标快速移动时，jQuery mouseleave 函数不会被触发 [英] jQuery mouseleave function isn't being triggered when mouse moves quickly

问题描述

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

I have a timeline with little pins on it which when hovered over, slide up or down and then display a caption. When the mouse leaves, the caption should disappear and the pin moves back. This works, but with the code I am using, if the mouse moves too quickly, it doesn't detect the mouse leave. How can I fix this?

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

P.S, the only reason I am using mouse enter/leave is because I think I needed to use live() as my elements are added dynamically after the document loads.

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

推荐答案

EDIT

好的新计划！

试试这个:

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

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

I didn't click that you are running animations on two separate objects! Feeling more confident about this one!

这篇关于当鼠标快速移动时，jQuery mouseleave 函数不会被触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！