Jquery：解决鼠标移入移出多次触发的问题
作者：互联网
jq的鼠标移入移除事件：
mouseover()鼠标移入（移入子元素也触发）
mouseout()鼠标移出（离开子元素也触发）
mouseenter()鼠标移入（移入子元素不触发）
mouseleave()鼠标移出（离开子元素不触发）
hover()鼠标移入移出（mouseenter与mouseleave的缩写）
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移入移除</title>
<style type="text/css">
.parent {
width: 200px;
height: 100px;
margin: 100px auto;
padding: 20px 0;
background-color: pink;
cursor: pointer;
}
.child {
width: 80px;
height: 20px;
margin: 0 auto;
background-color: yellow;
text-align: center;
}
.drop {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
<div class="drop">我是鼠标移入显示的内容</div>
</div>
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
// mouseover 进入子元素也触发
// $('.parent').on('mouseover',function(){
// $(this).parent().find('.drop').fadeIn();
// })
// $('.parent').on('mouseout',function(){
// $(this).parent().find('.drop').fadeOut();
// })
// mouseover 进入子元素不触发
// $('.parent').on('mouseenter',function(){
// $(this).parent().find('.drop').fadeIn();
// })
// $('.parent').on('mouseleave',function(){
// $(this).parent().find('.drop').fadeOut();
// })
$('.parent').hover(function(){
$(this).parent().find('.drop').stop(false, true).fadeIn();
},function(){
$(this).parent().find('.drop').stop(false, true).fadeOut();
})
</script>
</body>
</html>
分析：
可以看出我的代码中使用了stop()，如果不使用效果则是移入移出多次，就会不停的显示显示隐藏，stop的作用就是结束当前动画。
stop的在JQ中的使用场景：
stop();//停止当前动画，继续下一个动画
stop(true);//清除元素的所有动画
stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态
标签：Jquery,动画,鼠标,parent,移出,drop,stop,移入 来源： https://blog.csdn.net/qq_42961150/article/details/120517295