首先先来看一下jquery中stop（）的用法
- stop（）用于在动画执行前停止正在执行的动画
- stop（stopAll,goToEnd）的两个参数为布尔值；
- stopAll:true/false；是否停止对象接下来所有的动画；
- goToEnd:true/false;停止方式是直接将动画播放到结束位置还是停止在当前位置。
jquery中的fadeIn、fadeOut,slideDown、slideUp如果设置stop(false,false)，动画停止的位置将被记录下来，下一次动画走到上次被停止的位置就会结束。而我们需要的是下一次动画依旧能够完整执行，所以需要设置stop（true，true），将动画直接播放到结束。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.wodejifen_box{
position:relative;
width:80px;
height:34px;
overflow: visible;
}
.wodejifen{
height:34px;
font-size: 12px;
width:80px;
line-height: 34px;
border:1px solid red ;
text-align: center;
}
.wodejifen_content{
position:absolute;
width:150px;
top:34px;
left:0;
border:1px solid black;
padding:5px;
display:none;
}
.wodejifen_content li{
border-bottom:1px solid black;
line-height:20px;
list-style: none;
padding:0;
}
</style>
</head>
<body>
<div class="wodejifen_box">
<div class="wodejifen">
我的积分
</div>
<ul class="wodejifen_content">
<li>内容0000000</li>
<li>内容1111111</li>
<li>内容2222222</li>
<li>内容3333333</li>
</ul>
</div>
<script type="text/javascript">
$(‘.wodejifen‘).mouseover(function(event){
$(‘.wodejifen_content‘).stop(true,true).slideDown(150);
}).mouseout(function(event){
$(‘.wodejifen_content‘).stop(true,true).slideUp(150);
});
</script>
</body>
</html>
时间： 2024-08-08 17:50:20