溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“jquery的stop()方法如何使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習“jquery的stop()方法如何使用”吧!
在jquery中，stop()方法用于為被選元素停止當前正在運行的動畫效果，語法“$(selector).stop(stopAll,goToEnd)”；參數(shù)stopAll和goToEnd都是可選參數(shù)，其取值都是布爾值，默認值都是false。
本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。
在jquery中，stop()方法用于為被選元素停止當前正在運行的動畫效果。
語法：
$(selector).stop(stopAll,goToEnd)
stopAll 和 goToEnd 都是可選參數(shù)，它們的取值都是布爾值，默認值都是 false。stopAll 表示停止隊列動畫。當取值為 false 時，僅停止當前動畫；當取值為 true 時，停止當前動畫以及后面所有的隊列動畫。goToEnd 表示將動畫跳轉(zhuǎn)到當前動畫效果的最終狀態(tài)。
其中，stop() 方法共有 4 種形式，如表 1 所示。
| 形式 | 說明 |
|---|---|
| stop() | 等價于 stop(false, false)，僅停止當前動畫，后面的動畫還可以繼續(xù)執(zhí)行 |
| stop(true) | 等價于 stop(true, false)，停止當前動畫，并且停止后面的動畫 |
| stop(true, true) | 當前動畫繼續(xù)執(zhí)行，只停止后面的動畫 |
| stop(false, true) | 停止當前動畫，跳到最后一個動畫，并且執(zhí)行最后一個動畫 |
一般來說，在實際開發(fā)中我們只會用到 stop() 方法的第 1 個參數(shù)，很少用到第 2 個參數(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ù)覽效果下圖所示。
在這個例子中，我們使用 animate() 方法定義了 4 個動畫。我們點擊【開始】按鈕后，過了一會兒如果再點擊【停止】按鈕，就會立即停止當前執(zhí)行的動畫（也就是停止當前的 animate() 方法），然后跳到下一個動畫（也就是下一個 animate() 方法）。
如果再次點擊【停止】按鈕，它又會跳到下一個動畫，以此類推。小伙伴們可以自行測試來感受一下。
如果想要停止所有的隊列動畫，可以通過定義 stop() 方法的第一個參數(shù)為 true 來實現(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); //移出時返回原狀態(tài)
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>預(yù)覽效果下圖所示。
在這個例子中，我們使用 hover() 方法定義鼠標指針移入和鼠標指針移出時的動畫效果。當我們快速地移入或移出元素時，會發(fā)現(xiàn)一個很奇怪的 bug：元素會不斷地變長或變短！也就是說，動畫會不斷執(zhí)行，根本停不下來。
這種“根本停不下來”的 bug 在實際開發(fā)中經(jīng)常會碰到，小伙伴們一定要特別注意。實際上，這個 bug 是由動畫累積所導(dǎo)致的。在 jQuery 中，如果一個動畫沒有執(zhí)行完，它就會被添加到“動畫隊列”中去。在這個例子中，每一次移入或移出元素，都會產(chǎn)生一個動畫，如果該動畫沒有被執(zhí)行完，它就會被添加到動畫隊列中去，然后沒有被執(zhí)行完的動畫會繼續(xù)執(zhí)行，直到所有動畫執(zhí)行完畢。
針對這個 bug，我們只需要在移入或移出元素產(chǎn)生的動畫執(zhí)行之前加入 stop() 方法，就能輕松解決。最終修改后的代碼如下。
$("div").hover(function () {
$(this).stop().animate({ "height": "150px" }, 500);
}, function () {
$(this).stop().animate({ "height": "50px" }, 500); //移出時返回原狀態(tài)
})對于這種由于動畫累積產(chǎn)生的 bug，我們還可以通過is(":animated")來判斷當前的動畫狀態(tài)并解決。對于is(":animated")這種方式，之后會詳細介紹。
實際上，jQuery 還有一個方法可以中斷動畫——finish()。這個方法與 stop(true,true) 方法效果類似，因為它會清除排隊的動畫并使當前動畫跳到最終值。不過，與 stop(true,true) 不同的是，它會使所有排隊的動畫都跳到各自的最終值。finish() 方法用得不多，我們簡單了解一下即可。
到此，相信大家對“jquery的stop()方法如何使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼