ホームページ > 記事 > ウェブフロントエンド > jquery stop() メソッドの用途は何ですか?
jquery stop() メソッドの用途は何ですか?
- 青灯夜游オリジナル
- 2022-03-01 18:32:382860ブラウズ
jquery では、stop() メソッドは、選択した要素に対して現在実行中のアニメーション効果を停止するために使用されます。構文は "$(selector).stop(stopAll,goToEnd)" で、パラメータ stopAll と goToEnd です。パラメータを選択すると、その値はすべてブール値であり、デフォルト値は false です。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
jquery では、stop() メソッドを使用して、選択した要素に対して現在実行中のアニメーション効果を停止します。
構文:
$(selector).stop(stopAll,goToEnd)
stopAll と goToEnd はオプションのパラメーターで、値はブール値で、デフォルト値は false です。 stopAll はキューのアニメーションを停止することを意味します。値が false の場合、現在のアニメーションのみが停止します。値が true の場合、現在のアニメーションと後続のすべてのキュー アニメーションが停止します。 goToEnd は、アニメーションを現在のアニメーション効果の最終状態にジャンプすることを意味します。
表 1 に示すように、stop() メソッドには 4 つの形式があります。
| Description | |
|---|---|
| stop(false, false) と同等で、現在のアニメーションを停止するだけで、後続のアニメーションは引き続き実行できます | |
| stop(true, false) と同じ。現在のアニメーションを停止し、後続のアニメーションを停止します。 | ##stop(true, true) |
| stop(false, true) | |
| 一般に、実際の開発では stop() メソッドの最初のパラメータのみが使用され、2 番目のパラメータはほとんど使用されません。 |
<!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>プレビュー効果を次の図に示します。
この例では、animate() メソッドを使用して 4 つのアニメーションを定義します。 [開始]ボタンをクリックした後、しばらくしてから再度[停止]ボタンをクリックすると、現在実行中のアニメーションが即座に停止(つまり、現在のanimate()メソッドが停止)され、次のアニメーションにジャンプします。 (つまり、次の animate() メソッド)。
[停止]ボタンをもう一度クリックすると、次のアニメーションにジャンプします。友達は自分でテストして、それを感じることができます。
すべてのキュー アニメーションを停止したい場合は、stop() メソッドの最初のパラメータを true として定義することでこれを実現できます。コードは次のとおりです:
$("#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); //移出时返回原状态
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>プレビュー効果は次の図に示されています。
この例では、hover() メソッドを使用して、マウス ポインターが出入りするときのアニメーション効果を定義します。要素を素早く出し入れすると、非常に奇妙なバグが見つかります。要素が長くなったり短くなったりし続けるのです。つまり、アニメーションは実行を継続し、まったく停止することはできません。
この種の「止まらない」バグは実際の開発ではよく発生するため、友人は特に注意する必要があります。実はこのバグはアニメーションの蓄積が原因で発生します。 jQueryではアニメーションが完了していない場合は「アニメーションキュー」に追加されます。この例では、要素が出入りするたびにアニメーションが生成され、アニメーションが完了していない場合はアニメーションキューに追加され、その後、完了していないアニメーションが継続して追加されます。すべてのアニメーションが完了するまで実行されます。
このバグについては、要素の出入りによって生成されるアニメーションが実行される前に stop() メソッドを追加するだけで済み、簡単に解決できます。最終的に変更されたコードは次のとおりです。
$("div").hover(function () {
$(this).stop().animate({ "height": "150px" }, 500);
}, function () {
$(this).stop().animate({ "height": "50px" }, 500); //移出时返回原状态
})アニメーションの蓄積によるこの種のバグについては、is(":animated") を使用して現在のアニメーションの状態を判断し、解決することもできます。 is(":animated") メソッドについては後ほど詳しく紹介します。
実は、jQuery には、animation-finish() を中断するメソッドもあります。このメソッドは、キューに入れられたアニメーションをクリアし、現在のアニメーションを最終値にジャンプさせるという点で stop(true,true) メソッドと同様に機能します。ただし、stop(true,true) とは異なり、キューに入れられたすべてのアニメーションが最終値にジャンプします。 finish() メソッドはあまり使用されません。簡単に見てみましょう。
[推奨学習:
jQuery ビデオ チュートリアル、
Web フロントエンド開発ビデオ以上がjquery stop() メソッドの用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。