Question

使用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/

我尝试添加超时，但这没用。

目标是，仅在将鼠标移到两个元素的外部时，绿色框才会淡出。

有解决此问题的简单方法吗？

Answer 1

之所以会这样，是因为.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>

slideToggle()

Answer 2

经过一段时间的谷歌搜索，我找到了解决方案，这很简单。（我必须经历搜索字词的多次迭代）。

只需添加stop()即可完美解决所有问题。

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

http://jsfiddle.net/alewolf/fts1qo09/13/

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

2 个答案: