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()效果的队列。只要处理程序经常触发，即使鼠标已经静止在容器外部，也会发生这些事件。

如何阻止可见mouseenter()的{{1}}元素上的mouseleave()和$(this)事件。或者打破队列？

感谢。

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);
});

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

Answer 2

$(".some_wrapper").mouseenter(function(){
    if($(this).find(".info").is(":visible") === true) {
       $(this).find(".info").fadeIn(500);
    }
});

$(".some_wrapper").mouseleave(function(){
   if($(this).find(".info").is(":visible") === false) {
      $(this).find(".info").fadeOut(500);
   }
});

防止$（this）元素上的事件

2 个答案: