JQueryでのstopメソッドの使用

フロントエンド ページの開発では、より優れた効果が必要になる場合があります。現時点では、JQuery でアニメーションを使用するのが非常に簡単です。

最近、仕事中にページ要素を移動するエフェクトを見つけました。これはシンプルなページエフェクトであり、実装も非常に簡単です。

アニメーションを停止するために「stop()」メソッドが使用されています。私はこれまで使用しただけで、あまり注目していませんでした。

ここ数日で再びこの問題に遭遇したので、ドキュメントを開いてテストしてみたところ、実際にいくつかの新しい洞察が得られました。この方法について新たに理解したので、テストをここに記録します。

JQuery ドキュメントでのこのメソッドの説明は次のとおりです:

1. 概要

指定された要素で実行されているすべてのアニメーションを停止します。

キュー内で実行を待っているアニメーションがある場合 (かつ、clearQueue が true に設定されていない場合)、それらはすぐに実行されます。

2. パラメーターなし

シーンシミュレーション

バックグラウンドで移動して開始位置に戻す必要がある要素があるとします。ページには 3 つのボタンがあり、「移動を開始する」、「停止メソッドを使用して戻る」、「停止メソッドを使用せずに戻る」を担当します。

全体的なページのレンダリングは次のとおりです:

テストコードと効果

 1 <script type="text/javascript"> 2          3         $(function () { 4             //向右移动600px 5             $("#Button1").click(function () { 6                 $("#move").stop().animate({ left: 610 }, 3000); 
 7             }); 8             //立即往回移动（有stop） 9             $("#Button2").click(function () {10                 $("#move").stop().animate({ left: 10 }, 3000); 
11             });12             //移动完600px，才会往回移动（没有stop）13             $("#Button3").click(function () {14                 $("#move").animate({ left: 10 }, 3000);15             });16 17         });18     </script>

コードを表示

テストを通じて

停止がある場合は青色になります。 色付きの四角が右に移動しているときにボタンをクリックすると、すぐに四角が戻ります（左に移動します）。

青いブロックが右に移動しているときにボタンをクリックすると、ブロックは指定された位置に完全に移動するまで待機してから元に戻ります(左に移動)。

テストの概要

stop() は、現在実行中のアニメーションを停止し、後続のアニメーションをすぐに実行します。

3. 2 つのパラメーターまたは 1 つのパラメーター

ドキュメントを参照すると、この時点のパラメーターが [clearQueue]、[gotoEnd] であることがわかります。これらはすべてオプションであり、型は Boolean です。

clearQueue: true に設定すると、キューをクリアします。アニメーションはすぐに終了できます。

gotoEnd: 現在実行中のアニメーションをすぐに完了させ、表示と非表示の元のスタイルをリセットし、コールバック関数を呼び出します。

1つずつテストできます。コード:以下を参照してください。 結果を整理します

4. 注記

jQuery の新しいバージョンでは stop の別の使用法があり、これは queue で使用されます。この使用方法については、私はまだ所有者ではないため、ここで適切な説明をすることはできません。

今後ゆっくり勉強させてください。

stop の現在の使用法で十分だと思います。

以上がJQueryでのstopメソッドの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。