關於jQuery中，animate、slide、fade等動畫的連續觸發、滯後反覆執行的bug的我的解決辦法

時間 2019-12-05

標籤關於 jquery animate slide fade 動畫連續觸發滯後反覆執行 bug 我的解決辦法欄目 JQuery 简体版

原文原文鏈接

照例，如今開頭講個這個問題發生的背景吧：css

由於最近要作個操做選項的呼出，而後就想到了用默認隱藏，鼠標劃過的時候顯示的方法。html

剛開始打算添加一個class="active"，直接觸發mouseover（或者mouseenter）的時候add，mouseout（或者mouseleave）的時候remove，這個解決方法很簡單，也很實用，可是體驗上可能不是那麼酷炫（好吧，這個詞用的，瞬間感受好low啊），因此就想到了用animate或者slide這些jQuery的動畫，而後一開始講真，這個插件本身寫，會碰到些問題，不太好實現（畢竟js掌握的不是很到位），而後聽同事講去找找jquery，導入後直接引用就能夠了。jquery

（還好我沒養成一碰到要作某個特效，第一反應是網上找插件，提及這個，又想到前幾天碰到的關於將table中的表頭對界面滾動而固定的那個解決方法了，過幾天傳上來，講真，那個方法網上找了一圈沒找到合適的解決方法，最後我本身想了個方法，仍是蠻有成績感的，雖然有可能不是最優的解決方案）bootstrap

回到正題，網上找了一圈，講真，別人的插件，作的確實很贊，並且各類瀏覽器下的兼容性也解決了，不過我我的而言，只在兩三個頁面用到，並且又要導入文件（這個好像不是特別麻煩），又要用別人的，終歸沒什麼成就感。瀏覽器

而後，最後仍是本身動手寫了，雖然花了點時間，也碰到了一些問題，不過仍是不錯的，問題也最後解決了，至少對幾個jQuery的內置函數又熟悉了一點。ide

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()這個方法被我註釋掉了，是我我的認爲最完美的解決方法，沒有被註釋掉的，是我後來百度了一下後，別人提到的另外一種解決方案，但我我的感受不是特別完美，至於差異我在後面提。this

最開始，

$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：其實最無語的是，爲何剛開始的沒有在百度找到呢（只怪本身一開始沒輸對關鍵字）。