照例，現在開頭講個這個問題發生的背景吧： 因為最近要做個操作選項的呼出，然後就想到了用預設隱藏，滑鼠划過的時候顯示的方法。 剛開始打算添加一個class="active"，直接觸發mouseover（或者mouseenter）的時候add，mouseout（或者mouseleave）的時候remov...
照例，現在開頭講個這個問題發生的背景吧：
因為最近要做個操作選項的呼出，然後就想到了用預設隱藏，滑鼠划過的時候顯示的方法。
剛開始打算添加一個class="active"，直接觸發mouseover（或者mouseenter）的時候add，mouseout（或者mouseleave）的時候remove，這個解決方法很簡單，也很實用，但是體驗上可能不是那麼酷炫（好吧，這個詞用的，瞬間感覺好low啊），所以就想到了用animate或者slide這些jQuery的動畫，然後一開始講真，這個插件自己寫，會碰到些問題，不太好實現（畢竟js掌握的不是很到位），然後聽同事講去找找jquery，導入後直接引用就可以了。
（還好我沒養成一碰到要做某個特效，第一反應是網上找插件，說起這個，又想到前幾天碰到的關於將table中的表頭對界面滾動而固定的那個解決方法了，過幾天傳上來，講真，那個方法網上找了一圈沒找到合適的解決方法，最後我自己想了個方法，還是蠻有成績感的，雖然有可能不是最優的解決方案）
回到正題，網上找了一圈，講真，別人的插件，做的確實很贊，而且各種瀏覽器下的相容性也解決了，不過我個人而言，只在兩三個頁面用到，而且又要導入文件（這個好像不是特別麻煩），又要用別人的，終歸沒什麼成就感。
然後，最後還是自己動手寫了，雖然花了點時間，也碰到了一些問題，不過還是不錯的，問題也最後解決了，至少對幾個jQuery的內置函數又熟悉了一點。
ps:最後補充一句，在我自己找出解決方案後，再次百度了一下，好吧，出來的第一個網頁鏈接，點進去就是我所用的方法。
bug重現：原本想做個動圖的，好像太麻煩了，還是上代碼吧，知道這個問題的應該不用看動圖也知道是個怎麼樣的問題；不知道這個問題的，可以先把代碼拷貝下來試一下。
PS：下麵以animate動畫為例
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>test</title> <meta charset="utf-8"> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css"> <script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script> <script src="./bootstrap/js/bootstrap.min.js"></script> </head> <body> <div style="width:70%;margin:50px auto;height:300px;"> <div id="test" style="width:900px;height:100px;border:1px solid red;overflow:hidden;"> <div class="test" style="margin-left:-6em"> <a> 測試用的文字 <i class="fa fa-arrow-right"></i> </a> </div> </div> </div> <script> $("[data-toggle='tooltip']").tooltip(); $("#test").on("mouseover",function(){ var $this = $(this); var $thisTest = $this.find("div.test"); $thisTest.css("position","relative"); // $thisTest.stop(); $thisTest.filter(':not(:animated)').animate({marginLeft:"0em"}); }) .on("mouseout",function(){ var $this = $(this); var $thisTest = $this.find("div.test"); $thisTest.css("position","relative"); // $thisTest.stop(); $thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"}); }) //連續觸發動畫bug //不允許動畫累積；或是在新的動畫開始前，先停止當前正在進行的動畫 </script> </body> </html>
上面這份代碼，stop()這個方法被我註釋掉了，是我個人認為最完美的解決方法，沒有被註釋掉的，是我後來百度了一下後，別人提到的另一種解決方案，但我個人感覺不是特別完美，至於差別我在後面提。
最開始，
$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});
這兩句代碼，是沒有filter()函數的，也就是最開始碰到這個bug的時候的代碼的樣子。
這個bug產生原因就是事件在短時間內（上一個動畫未播放完），動畫累積導致的（估計碰到這個問題的，回過頭去看看代碼都知道這個原因）。所以，解決的方法，有兩個。
【filter】
一個就是用filter過濾，在動畫發生前，過濾掉正在進行動畫的元素，只讓上一個動畫已經結束的元素才能觸發新的事件。
然後這就帶來一個新問題了，當我把滑鼠移至對應的內容上，mouseover事件觸發，這個時候，在動畫還未結束的時候，我再將滑鼠移除對應內容區域外，mouseleave事件觸發，但是因為上一個動畫還未結束，所以即使觸發了該事件，但預期的函數並未執行，此時預期中的“mouseleave事件觸發，內容隱藏”結果便無法做到了。
當然，如果操作者在mouseover事件觸發的動畫結束前，滑鼠一直停在對應內容上，這個方案並不會有影響。
【stop】
對於stop()，雖然知道這是大家都瞭解的，還是再搬一遍吧。
//語法結構
$("#div").stop();//停止當前動畫，繼續下一個動畫
$("#div").stop(true);//清除元素的所有動畫
$("#div").stop(false, true);//讓當前動畫直接到達末狀態 ，繼續下一個動畫
$("#div").stop(true, true);//清除元素的所有動畫，讓當前動畫直接到達末狀態
這個方案的思路，就是簡單的：當我mouseover的時候，觸發對應的動畫，但是在動畫還未結束的時候，我卻要mouseleave，同時觸發mouseleave對應的動畫，這個時候我便需要停止對應元素正在進行的動畫。然後，這個bug也就不存在了。
最後，好吧，這篇隨筆好像也沒啥總結的，其實就是對animate、slide、fade動畫函數的熟悉吧，同時再熟悉一下stop有參數無參數的區別（講真，剛開始沒想到用stop，過了一兩天後，偶然看到API的時候，看到了stop，才突然有了用stop解決這個bug的設想）。
PS：其實最無語的是，為什麼剛開始的沒有在百度找到呢（只怪自己一開始沒輸對關鍵字）。
