ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryでアニメーションを終了する方法
jQueryでアニメーションを終了する方法
- 清浅オリジナル
- 2019-01-25 11:06:493958ブラウズ
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でアニメーションを終了する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。