jQueryスライド要素アップ/トグルアップ

jquery.slidetoggle（）を使用して、ページ要素をスライドさせるためのシンプルなjQueryコードスニペット。違いは、jQueyのSlideUp（）関数は主に要素を視界からスライドさせ、Slidedown（）を使用して再び登場させることです。

スライドアップの例

<span>$('#clickme').click(function() {
</span>  <span>$('#book').slideUp('slow', function() {
</span>    <span>// Animation complete.
</span>  <span>});
</span><span>});</span>

http://api.jquery.com/slideup/

slidetoggleの例

<span>$('#clickme').click(function() {
</span>  <span>$('#book').slideToggle('slow', function() {
</span>    <span>// Animation complete.
</span>  <span>});
</span><span>});</span>

http://api.jquery.com/slidetoggle/

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

jQueryスライド要素に関するよくある質問（FAQ）

​​jquery slidetoggle（）メソッドは、要素にスライド効果を作成できるJqueryの組み込み関数です。 Slideup（）とSlidedown（）メソッドの間を切り替えます。つまり、現在表示されている場合は要素をスライドさせ、隠している場合はスライドします。この方法は、ユーザーインタラクションに基づいて要素を表示または非表示にできるインタラクティブでダイナミックなWebページを作成するのに特に便利です。基本的な例は次のとおりです。

$（ "＃myElement"）。Slidetoggle（）;

この例では、ID「myElement」の要素が現在表示されている場合はスライドし、

slidetoggleの速度を制御できますか？ slidetoggle（）slidetoggle（）メソッドにパラメーターを渡して効果を発揮します。このパラメーターは、文字列（「遅い」、「高速」）またはミリ秒単位の期間を表す数値のいずれかです。たとえば、

$（ "＃myElement"）。slidetoggle（ "slow"）;
この例では、slidetoggle（）効果はID「myElement」の要素にゆっくりと適用されます。 SlideUp（）とSlidedown（）メソッドの間を切り替えます。選択した要素が現在表示されている場合、Slidetoggle（）がスライドして隠します。要素が現在隠されている場合、Slidetoggle（）が下にスライドして表示されます。一方、SlideUp（）メソッドは常に選択した要素をスライドモーションで隠し、Slidedown（）メソッドは常に選択した要素をスライドモーションで表示します。はい、slidetoggle（）メソッドにコールバック関数を渡すことにより、slidetoggle（）エフェクトが完了した後にコードを実行できます。この関数は、スライド効果が終了すると実行されます。例は次のとおりです。

$（ "＃myElement"）。slidetoggle（ "slow"、function（）{
alert（ "slideトグル完了！"）;
};
完了しますか？

はい、stop（）メソッドを使用して完了する前に、slidetoggle（）効果を停止できます。このメソッドは、選択した要素で現在実行されているアニメーションを停止します。例は次のとおりです。

$（ "＃myElement"）。Stop（）。slidetoggle（ "slow"）;

この例では、IDの「myElement」を備えた要素で現在実行中のアニメーションが停止され、スライドトーグル（）効果が適用されます。
はい、共通のクラスまたは属性でそれらを選択することにより、複数の要素でSlidetoggle（）メソッドを一度に使用できます。例は次のとおりです。

$（ "。myclass"）。slidetoggle（ "slow"）;

この例では、Slidetoggle（）効果はクラス「myclass」を持つすべての要素に適用されます。より複雑な効果を作成するためのjQueryメソッド。たとえば、Fadein（）およびFadeout（）メソッドを使用して、スライド中に要素をフェードアウトします。例は次のとおりです。

$（ "＃myElement"）。slidetoggle（ "slow"）。フェデイン（ "slow"）。フェードアウト（ "slow"）;

この例では、IDの「myelement」の要素が上下にスライドし、衰退し、フェードインして、htmtoggleをフェードします。要素？

slidetoggle（）メソッドは、div、段落、見出しなどの高さを持つ可能性のあるすべてのHTML要素で動作します。ただし、これらの要素にはデフォルトで高さがないため、スパンやリンクなどのインライン要素では期待どおりに機能しない場合があります。ただし、純粋なJavaScriptまたはCSSで同様の効果を作成できますが、より多くのコードが必要になる場合があり、jQueryを使用するほど簡単ではない場合があります。

以上がjQueryスライド要素アップ/トグルアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。