ホームページ > 記事 > ウェブフロントエンド > jQueryでアニメーションを終了する方法

jQueryでアニメーションを終了する方法

清浅オリジナル: 2019-01-25 11:06:493937ブラウズ

stop() 関数を直接使用すると、現在進行中のアニメーションをすぐに停止できます。この目的は、前のアニメーションが後続のアニメーションの効果に影響を及ぼさないようにすることです。

jQuery では、これを行うことができます。 stop() アニメーションを通じて終了します。通常、2 つのアニメーションを切り替えるために使用されます。マウスのスライドが速すぎるとアニメーション効果がマウスの動きと一致しない場合があるため、アニメーションを停止するには stop() が必要です。次に、この記事では、stop メソッドの使用方法を具体的な例を通して説明します。

[おすすめコース: jQuery チュートリアル]

stop() メソッドは、スライド、フェード、カスタムアニメーションなどを含む、すべての jQuery エフェクト関数に適用できます。

これには 2 つのパラメータがあります: stopAll、goToEnd

stopAll は、アニメーションキューをクリアする必要があるかどうかを示します。デフォルトは false で、アクティブなアニメーションのみを停止し、キューに入れられたアニメーションを逆方向に実行できます。

goToEnd は、現在のアニメーションをすぐに完了するかどうかを示します。デフォルトは false です。

したがって、デフォルトでは、stop() は選択した要素で指定された現在のアニメーションをクリアします

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
<style type="text/css"> 
#stop{
	margin-bottom:10px;
}
#panel,#flip

{   width:200px;
	padding:5px;
	text-align:center;
	background-color:pink;
	border:solid 1px #ccc;
}
#panel
{      
	
	display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击向下滑动</div>
<div id="panel">停止动画</div>
</body>
</html>

レンダリング:

jQueryでアニメーションを終了する方法

要約: 上記がこの記事の全内容です。この記事がアニメーションを終了する方法を学ぶのに役立つことを願っています。

以上がjQueryでアニメーションを終了する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jquery

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Angular フレームワークの利点は何ですか次の記事：Angular フレームワークの利点は何ですか

続きを見る

jQuery stop() メソッドを理解する