jQueryでアニメーションを終了する方法-jsチュートリアル-php.cn

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

清浅

リリース： 2019-01-25 11:06:49

オリジナル

3960 人が閲覧しました

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

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

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

[おすすめコース: 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でアニメーションを終了する方法