jQuery エフェクト - スライド

❮ 前章へ 次章へ ❯

jQuery slide メソッドは、要素を上下にスライドします。

クリックしてパネルをスライドアップ/ダウンしてください

Click to slide down/up the panel

時は金なりです。迅速かつ簡便な学習をお届けします。

W3Schools では、理解しやすく・使いやすい形式で、必要なすべてを学ぶことができます。

例

jQuery slideDown()
jQuery slideDown() メソッドのデモ。

jQuery slideUp()
jQuery slideUp() メソッドのデモ。

jQuery slideToggle()
jQuery SlideToggle() メソッドのデモ。

jQuery スライド・メソッド

jQuery により、要素にスライド効果を設定することができます。

jQuery には、次のスライド・メソッドがあります:

jQuery slideDown() メソッド

jQuery slideDown() メソッドは、要素を下にスライドさせるために使用します。

構文:

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

オプションの speed パラメータは、エフェクトの動作時間を指定します。それは次の値を取ることができます："slow"、"fast"、ミリ秒。

オプションの callback パラメータは、スライドの完了後に実行される関数です。

次の例は、slideDown() メソッドのデモです：

例

$("#flip").click(function(){
    $("#panel").slideDown();
});
Try it Yourself »

jQuery slideUp() メソッド

jQuery slideUp() メソッドは、要素を上にスライドさせるために使用します。

構文:

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

オプションの speed パラメータは、エフェクトの動作時間を指定します。それは次の値を取ることができます："slow"、"fast"、ミリ秒。

オプションの callback パラメータは、スライドの完了後に実行される関数です。

次の例は、slideUp() メソッドのデモです：

例

$("#flip").click(function(){
    $("#panel").slideUp();
});
Try it Yourself »

jQuery slideToggle() メソッド

jQuery slideToggle() メソッドは、slideDown() と slideUp() メソッドの間をトグルします。

要素が下にスライドされていれば、slideToggle() はそれを上にスライドします。

要素が上にスライドされていれば、slideToggle() はそれを下にスライドします。

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

オプションの speed パラメータは次の値を取ることができます："slow"、"fast"、ミリ秒。

オプションの callback パラメータは、スライドの完了後に実行される関数です。

次の例は、slideToggle() メソッドのデモです：

例

$("#flip").click(function(){
    $("#panel").slideToggle();
});
Try it Yourself »

練習問題で確認テスト！

練習問題 1 »  練習問題 2 »  練習問題 3 »  練習問題 4 »

jQuery エフェクト・リファレンス

全 jQuery エフェクトの完全な概要については、jQuery エフェクト・リファレンスをご覧ください。


❮ 前章へ 次章へ ❯