jQuery エフェクト - スライド

jQueryのスライドメソッドは、要素を上下にスライドさせることができます。

効果デモ

ここをクリックして、パネルを非表示/表示にします

一寸の時間も一寸の金、だから私たちはあなたに簡単で理解しやすい学習コンテンツを提供します。

ここでは、簡単で理解しやすい方法で必要などんな知識も得ることができます。

インスタンス

jQuery slideDown()
jQuery slideDown() メソッドをデモします。
jQuery slideUp()
jQuery slideUp() メソッドをデモします。
jQuery slideToggle()
jQuery slideToggle() メソッドをデモします。

jQuery スライドメソッド

jQueryを使って、要素にスライド効果を作成できます。

jQuery は以下のスライドメソッドを持ちます：

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() メソッド

jQuery slideDown() メソッドは要素を下にスライドします。

语法：

$(selector).slideDown(speed,callback);

オプションの speed 引数は効果の持続時間を指定します。以下の値を取ることができます："slow"、"fast"またはミリ秒。

オプションの callback 引数はスライドが完了した後に実行される関数名です。

以下の例は slideDown() メソッドを示しています：

インスタンス

$("#flip").click(function(){
  $("#panel").slideDown();
});

自分で試してみてください

jQuery slideUp() メソッド

jQuery slideUp() メソッドは要素を上にスライドします。

语法：

$(selector).slideUp(speed,callback);

オプションの引数です。 speed 引数は効果の持続時間を指定します。以下の値を取ることができます："slow"、"fast"またはミリ秒。

オプションの引数です。 callback 引数はスライドが完了した後に実行される関数名です。

以下の例は slideUp() メソッドを示しています：

インスタンス

$("#flip").click(function(){
  $("#panel").slideUp();
});

自分で試してみてください

jQuery slideToggle() メソッド

jQuery slideToggle() メソッドは slideDown()と slideUp()メソッド間で切り替わります。

要素が下にスライドする場合、slideToggle()はそれらを上にスライドできます。

要素が上にスライドする場合、slideToggle()はそれらを下にスライドできます。

$(selector).slideToggle(speed,callback);

オプションの引数です。 speed 引数は効果の持続時間を指定します。以下の値を取ることができます："slow"、"fast"またはミリ秒。

オプションの引数です。 callback 引数はスライドが完了した後に実行される関数名です。

以下の例は slideToggle() メソッドを示しています：

インスタンス

$("#flip").click(function(){
  $("#panel").slideToggle();
});

自分で試してみてください

jQuery エフェクトリファレンスマニュアル

jQuery エフェクトを完全に確認するには、私たちの jQuery エフェクトリファレンスマニュアル。