鼠标快速移动时未触发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);         
    });
});

推荐答案

编辑

好的新计划！

尝试一下:

$('#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屋！