初学JQ使用一些动画效果时常常会忘记stop()的重要性
如下图就是jq执行动画没有加stop(),每次移入移出系统都记住了,当你快速移入移出的时候你鼠标此时虽然是移出了,但是这个动画还没有执行完次数所以就会出现这种情况,stop()是清除之前的动画,执行最后一次动画。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.pull_menu {
position: relative;
width: 300px;
color: white;
line-height: 60px;
text-align: center;
background-color: tomato;
cursor: pointer;
margin: 100px auto;
}
ul {
width: 400px;
position: absolute;
background-color: skyblue;
display: none;
}
ul li {
text-decoration: none;
list-style: none;
line-height: 50px;
text-align: left;
color: black;
padding-left: 20px;
}
</style>
<script src="libs/jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="pull_menu">
下拉菜单
<ul>
<li>菜单项一</li>
<li>菜单项二</li>
<li>菜单项三</li>
</ul>
</div>
<script>
$('.pull_menu').mouseenter(function () {
$('ul').slideDown();
}).mouseleave(function () {
$('ul').slideUp();
});
</script>
</body>
</html>
加stop()的效果:
$('.pull_menu').mouseenter(function () {
$('ul').stop().slideDown();
}).mouseleave(function () {
$('ul').stop().slideUp();
});