站長(zhǎng)資訊網(wǎng)
在jquery中，stop()方法用于為被選元素停止當(dāng)前正在運(yùn)行的動(dòng)畫效果，語(yǔ)法“$(selector).stop(stopAll,goToEnd)”；參數(shù)stopAll和goToEnd都是可選參數(shù)，其取值都是布爾值，默認(rèn)值都是false。
本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。
在jquery中，stop()方法用于為被選元素停止當(dāng)前正在運(yùn)行的動(dòng)畫效果。
語(yǔ)法：
$(selector).stop(stopAll,goToEnd)
stopAll 和 goToEnd 都是可選參數(shù)，它們的取值都是布爾值，默認(rèn)值都是 false。stopAll 表示停止隊(duì)列動(dòng)畫。當(dāng)取值為 false 時(shí)，僅停止當(dāng)前動(dòng)畫；當(dāng)取值為 true 時(shí)，停止當(dāng)前動(dòng)畫以及后面所有的隊(duì)列動(dòng)畫。goToEnd 表示將動(dòng)畫跳轉(zhuǎn)到當(dāng)前動(dòng)畫效果的最終狀態(tài)。
其中，stop() 方法共有 4 種形式，如表 1 所示。
| 形式 | 說明 |
|---|---|
| stop() | 等價(jià)于 stop(false, false)，僅停止當(dāng)前動(dòng)畫，后面的動(dòng)畫還可以繼續(xù)執(zhí)行 |
| stop(true) | 等價(jià)于 stop(true, false)，停止當(dāng)前動(dòng)畫，并且停止后面的動(dòng)畫 |
| stop(true, true) | 當(dāng)前動(dòng)畫繼續(xù)執(zhí)行，只停止后面的動(dòng)畫 |
| stop(false, true) | 停止當(dāng)前動(dòng)畫，跳到最后一個(gè)動(dòng)畫，并且執(zhí)行最后一個(gè)動(dòng)畫 |
一般來(lái)說，在實(shí)際開發(fā)中我們只會(huì)用到 stop() 方法的第 1 個(gè)參數(shù)，很少用到第 2 個(gè)參數(shù)。
舉例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:50px; height:50px; background-color:lightskyblue; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/jquery.color.js"></script> <script> $(function () { $("#btn-start").click(function () { $("div").animate({ "width": "200px" }, 2000) .animate({ "background-color": "red" }, 2000) .animate({ "height": "200px" }, 2000) .animate({ "background-color": "blue" }, 2000); }); $("#btn-stop").click(function () { $("div").stop(); }) }) </script> </head> <body> <input id="btn-start" type="button" value="開始" /> <input id="btn-stop" type="button" value="停止" /><br /> <div></div> </body> </html>
預(yù)覽效果下圖所示。
在這個(gè)例子中，我們使用 animate() 方法定義了 4 個(gè)動(dòng)畫。我們點(diǎn)擊【開始】按鈕后，過了一會(huì)兒如果再點(diǎn)擊【停止】按鈕，就會(huì)立即停止當(dāng)前執(zhí)行的動(dòng)畫（也就是停止當(dāng)前的 animate() 方法），然后跳到下一個(gè)動(dòng)畫（也就是下一個(gè) animate() 方法）。
如果再次點(diǎn)擊【停止】按鈕，它又會(huì)跳到下一個(gè)動(dòng)畫，以此類推。小伙伴們可以自行測(cè)試來(lái)感受一下。
如果想要停止所有的隊(duì)列動(dòng)畫，可以通過定義 stop() 方法的第一個(gè)參數(shù)為 true 來(lái)實(shí)現(xiàn)，代碼如下：
$("#btn-stop").click(function () { $("div").stop(true); })
舉例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:50px; height:50px; background-color:lightskyblue; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("div").hover(function () { $(this).animate({ "height": "150px" }, 500); }, function () { $(this).animate({ "height": "50px" }, 500); //移出時(shí)返回原狀態(tài) }) }) </script> </head> <body> <div></div> </body> </html>
預(yù)覽效果下圖所示。
在這個(gè)例子中，我們使用 hover() 方法定義鼠標(biāo)指針移入和鼠標(biāo)指針移出時(shí)的動(dòng)畫效果。當(dāng)我們快速地移入或移出元素時(shí)，會(huì)發(fā)現(xiàn)一個(gè)很奇怪的 bug：元素會(huì)不斷地變長(zhǎng)或變短！也就是說，動(dòng)畫會(huì)不斷執(zhí)行，根本停不下來(lái)。
這種“根本停不下來(lái)”的 bug 在實(shí)際開發(fā)中經(jīng)常會(huì)碰到，小伙伴們一定要特別注意。實(shí)際上，這個(gè) bug 是由動(dòng)畫累積所導(dǎo)致的。在 jQuery 中，如果一個(gè)動(dòng)畫沒有執(zhí)行完，它就會(huì)被添加到“動(dòng)畫隊(duì)列”中去。在這個(gè)例子中，每一次移入或移出元素，都會(huì)產(chǎn)生一個(gè)動(dòng)畫，如果該動(dòng)畫沒有被執(zhí)行完，它就會(huì)被添加到動(dòng)畫隊(duì)列中去，然后沒有被執(zhí)行完的動(dòng)畫會(huì)繼續(xù)執(zhí)行，直到所有動(dòng)畫執(zhí)行完畢。
針對(duì)這個(gè) bug，我們只需要在移入或移出元素產(chǎn)生的動(dòng)畫執(zhí)行之前加入 stop() 方法，就能輕松解決。最終修改后的代碼如下。
$("div").hover(function () { $(this).stop().animate({ "height": "150px" }, 500); }, function () { $(this).stop().animate({ "height": "50px" }, 500); //移出時(shí)返回原狀態(tài) })
對(duì)于這種由于動(dòng)畫累積產(chǎn)生的 bug，我們還可以通過is(":animated")來(lái)判斷當(dāng)前的動(dòng)畫狀態(tài)并解決。對(duì)于is(":animated")這種方式，之后會(huì)詳細(xì)介紹。
實(shí)際上，jQuery 還有一個(gè)方法可以中斷動(dòng)畫——finish()。這個(gè)方法與 stop(true,true) 方法效果類似，因?yàn)樗鼤?huì)清除排隊(duì)的動(dòng)畫并使當(dāng)前動(dòng)畫跳到最終值。不過，與 stop(true,true) 不同的是，它會(huì)使所有排隊(duì)的動(dòng)畫都跳到各自的最終值。finish() 方法用得不多，我們簡(jiǎn)單了解一下即可。
【推薦學(xué)習(xí)：jQuery視頻教程、web前端開發(fā)視頻】
