jQuery下拉菜单和stop()方法

Summ
457 阅读1分钟

当鼠标移入一级菜单时，下面对应的二级菜单会显示出来

mouseover：鼠标移入事件：事件在鼠标移动到选取的元素及其子元素上时触发。 mouseout： 鼠标离开事件

mouseenter: 鼠标移入事件：事件只在鼠标移动到选取的元素上时触发。
mouseleave：鼠标离开事件

如果有鼠标移入事件,请使用mouseenter，而不是mouseover。
鼠标离开事件使用mouseleave,就不要使用mouseout。

代码：

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			.wrap {
				width: 330px;
				height: 30px;
				margin: 100px auto 0;
				padding-left: 10px;
				background-image: url(img/bg.jpg);
			}
			
			.wrap li {
				background-image: url(img/libg.jpg);
			}
			
			.wrap>ul>li {
				float: left;
				margin-right: 10px;
				position: relative;
			}
			
			.wrap a {
				display: block;
				height: 30px;
				width: 100px;
				text-decoration: none;
				color: #000;
				line-height: 30px;
				text-align: center;
			}
			
			.wrap li ul {
				position: absolute;
				top: 30px;
				display: none;
			}
		</style>
		<script src="js/jquery.js"></script>
		<script>
			$(function() {

				//mouseover：鼠标经过事件
				//mouseout:  鼠标离开事件

				//mouseenter: 鼠标进入事件
				//mouseleave：鼠标离开事件

				var $li = $(".wrap>ul>li");

				//给li注册鼠标经过事件，让自己的ul显示出来。mouseenter()方法也可以
				$li.mouseover(function() {
					//找到所有的儿子，并且还得是ul
					//谁触发了鼠标经过事件,那这个this就是谁,this还是一个DOM对象
					//$(this).children("ul").show();
					$(this).children("ul").slideDown(300);//带滑动效果
				  //$(this).children("ul").css("display","block");与上面方法等价
				});
				//给li注册鼠标离开事件，让自己的ul隐藏出来。mouseleave()方法也可以
				$li.mouseout(function() {
					//$(this).children("ul").hide();
					$(this).children("ul").slideUp(200);//带滑动效果
					//$(this).children("ul").css("display","none");与上面方法等价
				});

			});
		</script>
	</head>

	<body>
		<div class="wrap">
			<ul>
				<li>
					<a href="javascript:;">一级菜单1</a>
					<ul class="ul">
						<li>
							<a href="javascript:;">二级菜单11</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单12</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单13</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="javascript:;">一级菜单2</a>
					<ul>
						<li>
							<a href="javascript:;">二级菜单21</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单22</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单23</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="javascript:;">一级菜单3</a>
					<ul>
						<li>
							<a href="javascript:;">二级菜单31</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单32</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单33</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

	</body>

</html>

上述代码运行时，会出现一个问题：做滑入和滑出动画都需要时间，当你快速移动鼠标，上一动画还没做完，就会出现动画排队等待执行。出现鼠标移走后动画还在执行的现象。
这种现象为动画队列。

解决这种现象，可使用 stop([stopAll,goToEnd]); 方法。它用于在动画或效果完成前对它们进行停止。

  • 参数1：可选的。是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
  • 参数2：可选的。是否立即完成当前动画。默认是false。

上述例子可对下面代码进行修改：

$(this).children("ul").stop(true,false).slideDown(300);
$(this).children("ul").stop(true,false).slideUp(200);

加了.stop(true,false)的意思是：当stop前面动画没执行完毕就触发stop后面的动画时，清除stop前的动画队列，不再执行该动画，立即执行stop后面的动画。

完整代码：

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			.wrap {
				width: 330px;
				height: 30px;
				margin: 100px auto 0;
				padding-left: 10px;
				background-image: url(img/bg.jpg);
			}
			
			.wrap li {
				background-image: url(img/libg.jpg);
			}
			
			.wrap>ul>li {
				float: left;
				margin-right: 10px;
				position: relative;
			}
			
			.wrap a {
				display: block;
				height: 30px;
				width: 100px;
				text-decoration: none;
				color: #000;
				line-height: 30px;
				text-align: center;
			}
			
			.wrap li ul {
				position: absolute;
				top: 30px;
				display: none;
			}
		</style>
		<script src="js/jquery.js"></script>
		<script>
			$(function() {

				//mouseover：鼠标经过事件
				//mouseout:  鼠标离开事件

				//mouseenter: 鼠标进入事件
				//mouseleave：鼠标离开事件

				var $li = $(".wrap>ul>li");

				//给li注册鼠标经过事件，让自己的ul显示出来。mouseenter()方法也可以
				$li.mouseover(function() {
					//找到所有的儿子，并且还得是ul
					//谁触发了鼠标经过事件,那这个this就是谁,this还是一个DOM对象
					//$(this).children("ul").show();
					$(this).children("ul").stop(true,false).slideDown(300);//带滑动效果
				  //$(this).children("ul").css("display","block");与上面方法等价
				});
				//给li注册鼠标离开事件，让自己的ul隐藏出来。mouseleave()方法也可以
				$li.mouseout(function() {
					//$(this).children("ul").hide();
					$(this).children("ul").stop(true,false).slideUp(200);//带滑动效果
					//$(this).children("ul").css("display","none");与上面方法等价
				});

			});
		</script>
	</head>

	<body>
		<div class="wrap">
			<ul>
				<li>
					<a href="javascript:;">一级菜单1</a>
					<ul class="ul">
						<li>
							<a href="javascript:;">二级菜单11</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单12</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单13</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="javascript:;">一级菜单2</a>
					<ul>
						<li>
							<a href="javascript:;">二级菜单21</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单22</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单23</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="javascript:;">一级菜单3</a>
					<ul>
						<li>
							<a href="javascript:;">二级菜单31</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单32</a>
						</li>
						<li>
							<a href="javascript:;">二级菜单33</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

	</body>

</html>
avatar
文章
阅读
粉丝