最近学到了bootstrap里的过渡效果，在用silidetoggle方法的时候出现了一个有意思的现象，在鼠标滑过速度过快或者次数过多或者其他不知名原因的情况下，收放效果一直重复，代码：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <meta charset="UTF-8"> 6 <title></title> 7 <link rel="stylesheet" href="../res/bootstrap.css"> 8 <script src="../res/jquery-2.2.3.min.js"></script> 9 <script src="../res/bootstrap.min.js"></script> 10 <style> 11 li a span{ 12 margin-right: 15px; 13 color: deepskyblue; 14 } 15 </style> 16 </head> 17 <body style="margin-top: 50px"> 18 <div class="container"> 19 <div class="btn-group"> 20 <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> 21 water 22 <span class="caret"></span> 23 </button> 24 <ul class="dropdown-menu" role="menu"> 25 <li> 26 <a href="#"> 27 <span class="glyphicon glyphicon-piggy-bank"></span> 28 基本信息 29 </a> 30 </li> 31 <li> 32 <a href="#"> 33 <span class="glyphicon glyphicon-book"></span> 34 平面示图 35 </a> 36 </li> 37 <li> 38 <a href="#"> 39 <span class="glyphicon glyphicon-alert"></span> 40 运行监测 41 </a> 42 </li> 43 <li> 44 <a href="#"> 45 <span class="glyphicon glyphicon-adjust"></span> 46 平衡分析 47 </a> 48 </li> 49 <li> 50 <a href="#"> 51 <span class="glyphicon glyphicon-apple"></span> 52 数据查询 53 </a> 54 </li> 55 <li> 56 <a href="#"> 57 <span class="glyphicon glyphicon-save"></span> 58 CAD图 59 </a> 60 </li> 61 </ul> 62 </div> 63 </div> 64 <script> 65 $(".btn-group").hover(function() { 66 $(this).children("ul").slideToggle(); 67 }); 68 </script> 69 </body> 70 </html>
经过一番查找，看到了一个方法：stop（）。
.stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。
stop在新版jQuery中添加了2个参数：
第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；
第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候。
然后我把这个方法加到silidetoggle前面，代码如下：
1 <script> 2 $(".btn-group").hover(function() { 3 $(this).children("ul").stop(true, false).slideToggle(); 4 }); 5 </script>
然后，过渡动画不会再无意义重复了！stop()方法简单地来说，就是当鼠标离开目标区域时，立即终止当前没有执行完的过渡效果。
