jQuery下拉菜单和stop()方法
2022-03-08 本文已影响0人
马佳乐
当鼠标移入一级菜单时，下面对应的二级菜单会显示出来
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>
