分享有關jQuery中animate、slide、fade等動畫的連續觸發、滯後反覆執行的bug_jquery
- WBOY原創
- 2016-05-16 15:20:341983瀏覽
我寫文章的風格就是喜歡在開頭講問題法傷的背景：
因為最近要做個操作選項的呼出，然後就想到了用預設隱藏，滑鼠劃過的時候顯示的方法。
剛開始打算加入一個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的設想）。
以上所述是腳本之家小編給大家分享有關jQuery中animate、slide、fade等動畫的連續觸發、滯後反覆執行的bug，希望對大家今後的工作學習有所幫助。