jQuery｢.slideUp( )/.slideDown()/.slideToggle()｣で縦方向のスライドで表示・非表示する方法

2020年9月16日

jQueryの「.slideUp( )/.slideDown()/.slideToggle()」は、指定要素を縦スライドで表示・非表示する事ができるメソッド

今回は、jQueryの「.slideUp( )/.slideDown()/.slideToggle()」について、その使い方をサンプルを交えて解説しよう。

.slideUp( )/.slideDown()の機能とは？

.slideUp( )/.slideDown()の機能

.slideUp()は、指定要素を上方向にスライドして消え.slideDown()は、下方向のスライド表示する事ができる。

.slideToggle()の機能とは？

.slideToggle()の機能

.slideToggle()は、指定要素の表示・非表示を自動判別して、縦方向のスライドで表示・非表示させる」事ができる。

.slideUp( )/.slideDown()/.slideToggle()の構文

.slideUp()の構文は次のような記述となる

$("セレクタ").slideUp();

.slideDown()の構文は次のような記述となる

$("セレクタ").slideDown();

.slideToggle()の構文は次のような記述となる

$("セレクタ").slideToggle();

引数にミリ秒を指定して、スライド時間を調整する構文

.slideUp( ).slideDown().slideToggle()に引数を「ミリ秒」で指定する事で、スライドする時間を調整できる。（1秒は1000ミリ秒）

$("セレクタ").slideUp(1000);

$("セレクタ").slideDown(1000);

$("セレクタ").slideToggle(1000);

引数にコールバック関数を指定できる

.slideUp( ).slideDown()の引数にコールバック関数を入れる事で、スライド表示された後に何かの処理を加える事ができる。

$("セレクタ").slideUp(3000, function(){
  // 非表示後に加えたい処理
});

$("セレクタ").slideDown(3000, function(){
  // 非表示後に加えたい処理
});

$("セレクタ").slideToggle(3000, function(){
  // 非表示後に加えたい処理
});

.slideUp( )/.slideDown()/.slideToggle()の使用例

ボタンクリックで対象をスライド表示させる例

ボタンクリックで、サンプルテキストをスライドアップ・スライドダウンさせる例。

HTML

<button class="up">スライドアップ</button>
<button class="down">スライドダウン</button>
<p class="target">サンプルテキスト</p>

jQuery

$(function(){
  $('.up').on('click', function() {
    $('.target').slideUp(1000);
  });
  $('.down').on('click', function() {
    $('.target').slideDown(1000);
  });
});

この例では.upのボタンをクリックする事で、class="target"にあたる「サンプルテキスト」が1000ミリ秒（１秒）でスライドアップで消え.downボタンをクリックする事で対象がスライドダウンで表示されるようになる。

この例の実際の動きをcodePenで見てみよう。

See the Pen slideUp()slideDown01 by stand4u (@stand4u) on CodePen.

スライド表示させた後に、コールバック関数を使う例

.upのボタンをクリックする事で、サンプルテキストがスライドアップされた後、.upのボタンの背景色が赤になり、.downボタンをクリックする事で対象がスライドダウンで表示された後、.downのボタンの背景色が青色になる。

HTML

<button class="up">スライドアップ</button>
<button class="down">スライドダウン</button>
<p class="target">サンプルテキスト</p>

jQuery

$(function(){
  $('.up').on('click', function() {
    $('.target').slideUp(1000,function(){
      $('.up').css("background-color","red");
    });
  });
  $('.down').on('click', function() {
    $('.target').slideDown(1000,function(){
      $('.down').css("background-color","blue");
      });
  });
});

buttonをクリックする事で、1000ミリ秒（１秒）でスライド表示・非表示され、それぞれに設定したコールバック関数で、その後クリックしたボタンの背景色が変わるようになる。

この例の実際の動きをcodePenで見てみよう。

See the Pen slideUp()slideDown02 by stand4u (@stand4u) on CodePen.

jQuery｢.slideUp( )/.slideDown()を一つにしたのが「.slideToggle()」

さきほどの例のように｢.slideUp( )/.slideDown()｣を使って、２つのボタンでスライド表示・スライド非表示する事ができたが.slideToggle()を使うと１つのボタンイベントで、スライド表示・非表示を完結する事ができる。

HTML

<button>スライド表示</button>
<p class="target">サンプルテキスト</p>

jQuery

$(function(){
  $('button').on('click', function() {
    $('.target').slideToggle(500);
  });
});});

要するに.slideToggle()は対象の要素が表示されていたらスライドアップして非表示にし、非表示状態であれば、スライドダウンで表示されるようになるという感じで、自動判別してくれるのだ。

この例の実際の動きをcodePenで見てみよう。

See the Pen slideToggle01 by stand4u (@stand4u) on CodePen.