时间戳

首页 > 解决方案 > 在两个 div 之间移动鼠标时避免淡出

jquery - 在两个 div 之间移动鼠标时避免淡出

问题描述

在两个元素之间使用show和hide移动鼠标时效果很好。没有闪烁等。

$(".blocka,.blockb").mouseenter(function(){
     $(".blockb").show();
});
$(".blocka,.blockb").mouseleave(function(){
     $(".blockb").hide();
});

http://jsfiddle.net/alewolf/07sramtq/1/

但是，当使用时fadeIn，fadeOut动画总是在两个元素之间移动鼠标之间开始。

$(".blocka,.blockb").mouseenter(function(){
     $(".blockb").fadeIn();
});
$(".blocka,.blockb").mouseleave(function(){
     $(".blockb").fadeOut();
});

http://jsfiddle.net/alewolf/mLzejsvt/3/

我尝试添加超时，但没有奏效。

目标是只有当鼠标移到两个元素之外时，绿色框才会淡出。

有没有简单的方法来解决这个问题？

标签： jquery

解决方案

发生这种情况是因为mouseenter事件侦听器也添加到.blockb. fadeIn鼠标进入时需要停止动画blockb。

查看片段。

$(".blocka").mouseenter(function(){
     $(".blockb").fadeIn();
});
$(".blocka,.blockb").mouseleave(function(){
     $(".blockb").fadeOut();
});

$(".blockb").mouseenter(function(){
     $(".blockb").stop();
});
.blocka{width:150px;height:50px;background:red;}
.blockb{width:250px;height:50px;background:green; display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<fieldset>
<div class="blocka"></div>
<div class="blockb"></div>
</fieldset>

推荐阅读