语法格式：
$(selector).stop(true, false);
第一个参数:
+ ture: 后续动画不执行
- false：后续动画会执行
第二个参数：
- true: 立即执行完成当前动画
- false: 立即停止当前动画
如果两个参数都不写， 默认两个都是false。
实际工作中，直接写stop()用的多。
案例：鼠标悬停时， 弹出下拉菜单(下拉时带动画)
<!DOCTYPE html>
<html>
<head>
<title>停止动画 Demo</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.wrap{
330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
display: block;
}
.wrap li{
background-color: green;
}
.wrap>ul>li{
float: left;
margin-right: 10px;
position: relative;
}
.wrap a{
display: block;
height: 30px;
100px;
text-decoration: none;
color: #000；
line-height:30px;
text-align: center;
}
.wrap li ul{
position: absolute;
top: 30px;
display: none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
var jQuery_li = $(".wrap>ul>li");
//绑定事件
jQuery_li.mouseenter(function(event) {
$(this).children('ul').stop().slideDown(1000);
});
jQuery_li.mouseleave(function(event) {
$(this).children('ul').stop().slideUp(1000);
});
})
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0)">一级菜单1</a>
<ul>
<li><a href="javascript:void(0)">二级菜单2</a></li>
<li><a href="javascript:void(0)">二级菜单3</a></li>
<li><a href="javascript:void(0)">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">二级菜单1</a>
<ul>
<li><a href="javascript:void(0)">二级菜单2</a></li>
<li><a href="javascript:void(0)">二级菜单3</a></li>
<li><a href="javascript:void(0)">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">三级菜单1</a>
<ul>
<li><a href="javascript:void(0)">三级菜单2</a></li>
<li><a href="javascript:void(0)">三级菜单3</a></li>
<li><a href="javascript:void(0)">三级菜单4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>