JQuery_jqueryをベースにしたスライドとアニメーションの紹介

jQuery のスライディング メソッド: 要素にスライディング効果を作成できます。
slideDown() は要素を下にスライドさせます。
slideUp() は要素を上にスライドさせます。
slideToggle() は、slideDown() メソッドと slideUp() メソッドを切り替えます。

$(selector).slide(speed,callback);
オプションのspeedパラメータはエフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバック パラメーターは、スライディングの完了後に実行される関数の名前です。

jQuery アニメーション - jQuery animate() メソッドは、カスタム アニメーションの作成に使用されます。
構文:
$(selector).animate({params},speed,callback);
必須の params パラメーターは、アニメーションを形成する CSS プロパティを定義します。
オプションの速度パラメーターは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバック パラメーターは、アニメーションの完了後に実行される関数の名前です。
デフォルトでは、すべての HTML 要素の位置は静的であり、移動できません。位置を操作したい場合は、必ず最初に要素の CSS 位置プロパティを相対、固定、または絶対に設定してください。
jQuery animate() - 複数のプロパティを操作する機能
カラー アニメーションを生成する必要がある場合は、jQuery からカラー アニメーション プラグインをダウンロードする必要があります。コム。
jQuery animate() - 相対値の使用
相対値を定義することもできます (値は要素の現在の値に対する相対値です)。値の前に = または -= を追加する必要があります:

jQuery animate() - 事前定義された値を使用します
プロパティの値をアニメーション化して「表示」、「非表示」、または「切り替え」することもできます:
$(" button")。 click(function(){
$("div").animate({
height:'toggle'
});
});

jQuery animate() - キュー機能の使用
デフォルトでは、jQuery はアニメーション用のキュー機能を提供します。
これは、複数の animate() 呼び出しを次々に記述すると、jQuery がそれらのメソッド呼び出しを含む「内部」キューを作成することを意味します。次に、これらのアニメーション呼び出しを 1 つずつ実行します。

ex1、ex2

jQuery stop() メソッド

jQuery stop() メソッドは、アニメーションやエフェクトが完了する前に停止するために使用されます。

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

$(selector).stop(stopAll,goToEnd);

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

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

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