最近學到了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()方法簡單地來說，就是當滑鼠離開目標區域時，立即終止當前沒有執行完的過渡效果。