javascript - 阻止 $(this) 元素上的事件

Question

一些给定的 HTML 文章，例如:

<article id="someId" class="some_wrapper">
    <section class="info_wrapper">
        <section class="info">
            <p>Content</p>
        </section>
    </section>
</article>

与一些基本的 Jquery 结合使用，例如:

$(".some_wrapper").mouseenter(function(){
    $(this).find(".info").fadeIn(500);
});

$(".some_wrapper").mouseleave(function(){
    $(this).find(".info").fadeOut(500);
});

问题:如果用户将鼠标从 .some_wrapper 快速移动到另一个，事件处理程序会多次触发并构建 fadeIn() 和 fadeOut() 效果。只要处理程序经常触发，即使鼠标已经在容器外静止不动，这些情况也会发生。

如何防止 $(this) 元素上发生 mouseenter() 和 mouseleave() 事件，其中 .info 可见。或者打破队列？

谢谢。

Answer 1

在触发fadeIn或Out事件之前需要使用stop()函数

$(".some_wrapper").mouseenter(function(){
    $(this).find(".info").stop().fadeOut(500);
    $(this).find(".info").fadeIn(500);
});

$(".some_wrapper").mouseleave(function(){
    $(this).find(".info").stop().fadeIn(500);
    $(this).find(".info").fadeOut(500);
});

这将停止所有先前触发的事件并执行最新的事件。因此不会发生重复。