jQuery實現點擊行選中或取消CheckBox的方法
642
2024-02-23
我寫文章的風格就是喜歡在開頭講問題法傷的背景：
因為最近要做個操作選項的呼出，然后就想到了用默認隱藏，鼠標劃過的時候顯示的方法。
剛開始打算添加一個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" >
<link rel="stylesheet" >
<script src="http://www.gimoo.net/t/1904/bootstrap/js/jquery-1.11/jquery.min.js"></script>
<script src="http://www.gimoo.net/t/1904/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，希望對大家今后的工作學習有所幫助。
