首先先来看一下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>