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);//清除元素的所有动画,让当前动画直接到达末状态

上一篇:java-日常练习-多线程-停止线程方法介绍(stop,interrupt,结合while使用退出标签)


下一篇:3.【xkafka.sh】kafka集群启动脚本