jQueryでスライド表示・非表示(slideDown・slideUp・slideToggle)をする方法【jQuery】

jQueryを使って要素のスライド表示・非表示が出来るslideDown・slideUp・slideToggleメソッド。
これらを使う事で、動的なコンテンツを作成する事が可能です。今回は、Webサイトでよくある質問などに使用されるこれらのメソッドの使い方を解説していきます。

slideDown・slideUp・slideToggleメソッドについて

slideDown・slideUp・slideToggleの各メソッドは、jQueryで使用できるメソッドで、それぞれ以下の特徴があります。

slideDown()

slideDownメソッドは、指定された要素をスライドしながら表示できるメソッド

slideUp()

slideUpメソッドは、指定された要素をスライドしながら非表示にできるメソッド

slideToggle()

slideToggleメソッドは、指定された要素をスライドしながら表示・非表示にできるメソッド

各メソッドの詳しい内容については以下で解説致します。

slideDownメソッド

slideDownメソッドは、指定された要素をスライドしながら表示できるメソッドです。
基本的な記述方法は以下となります。

$('スライドで表示させる要素').slideDown();

上記のように記述する事で、あらかじめ非表示になっている要素をスライドしながら表示できます。
引数には、スライドする時間やイージングの指定、コールバック関数などを指定する事が可能です。引数についてはこちらをご覧ください。

slideDownメソッドの使用例

$('.btn').on('click',function(){
    $('.slide_text').slideDown();
});

slideUpメソッド

slideUpメソッドは、指定された要素をスライドしながら非表示にできるメソッドです。
基本的な記述方法は以下となります。

$('スライドで非表示にさせる要素').slideUp();

上記のように記述する事で、あらかじめ表示されている要素をスライドしながら非表示にできます。
引数には、スライドする時間やイージングの指定、コールバック関数などを指定する事が可能です。引数についてはこちらをご覧ください。

slideUpメソッドの使用例

$('.btn').on('click',function(){
    $('.slide_text').slideUp();
});

slideToggleメソッド

slideToggleメソッドは、指定された要素をスライドしながら表示・非表示にできるメソッドで、slideDwonメソッドとslideUpメソッドを合わせたメソッドです。
基本的な記述方法は以下となります。

$('スライドで表示・非表示にさせる要素').slideToggle();

上記のように記述する事で、あらかじめ表示されている要素をスライドしながら表示・非表示にできます。
引数には、スライドする時間やイージングの指定、コールバック関数などを指定する事が可能です。引数についてはこちらをご覧ください。

slideToggleメソッドの使用例

$('.btn').on('click',function(){
    $('.slide_text').slideToggle();
});

各メソッドで使用できる引数について

slideDown・slideUp・slideToggle各メソッドで使用できる引数には、スライドの時間、イージングの種類、コールバック関数などを指定する事ができます。主に使用する引数は以下となり、各引数はカンマ区切りで指定可能です。

duration

スライドさせる時間を指定。初期値は400ミリ秒(0.4秒)。
数値の他に「“slow”」「“normal”」「“fast”」が指定可能。

$('.btn').on('click',function(){
    // スライドする時間を1000ミリ秒(1秒)
    $('.slide_text').slideToggle(1000);
});

easing

動き方を指定。初期値はswing。
デフォルトでは「“swing”」と「“linear”」の2つのみ指定可能。イージングを追加する場合はプラグインを読み込む必要があります。

$('.btn').on('click',function(){
    // スライドする動きにlinearを指定
    $('.slide_text').slideToggle('linear');
});

complete(コールバック関数)

スライド処理後に呼び出すコールバック関数を指定。
初期値では指定無し。

$('.btn').on('click',function(){
    // スライド完了後にアラート表示
    $('.slide_text').slideToggle(function(){
        alert('スライド完了');
    });
});

各メソッドでの他の引数についての使用については公式サイトをご覧ください。
slideDown・slideUp・SlideToggle

さいごに

いかがでしたでしょうか。
今回は、jQueryでスライド表示・非表示(slideDown・slideUp・slideToggle)をする方法を解説しました。
slideToggleメソッドに関してはtoggle系のメソッドでもよく使用しますので、基本的な使い方の他、コールバック関数も含めて覚えておいてもいいかと思います。