この記事では、jQueryのslideUp(); / slideDown(); / slideToggle(); メソッドを紹介します。
これらを使うと、要素の表示・非表示をスライドするように動かすことができます。実際のWebサイトでは、よくある質問に使用されることが多くあります。
- slideUp / slideDown / slideToggleの書き方・使い方
- slideメソッドの実装例
jQueryのスライド表示・非表示の操作方法
それでは、それぞれの記述の仕方をコードを見ながら見ていきましょう。
slideDown()でスライド表示する
はじめにslideDown();は以下のように記述します。
$("スライドさせたい要素").slideDown();
このように書くことで、あらかじめ閉まわれている（非表示になっている）指定した要素が、スライドしながら表示されます。
引数には、スライドする時間や、アニメーションの動き方などオプションとなる値を入れることができます。
$("p").slideDown(300);
主なオプションには、以下の種類があります。すべて記述する必要はなく、必要があれば随時追記しましょう。詳細はjQueryの公式サイトも参照にしてください。slideUp();も同様のオプションです。
| オプション | 説明 |
|---|---|
| duration | アニメーションさせる時間の設定。初期値は400（0.4秒）。 数値または、”fast”/”slow”で指定できる。 |
| easing | 動き方の設定。初期値はswingというタイプになっている。 |
| complete | アニメーション処理後に呼び出す関数を指定でできる。初期値は指定なし。 |
| step | アニメーションの間隔の設定。 |
| specialEasing | CSSプロパティごとに別々の動きを指定する |
See the Pen slidedown by ZeroPlus (@zeroplus-programming) on CodePen.
slideUp()でスライド非表示する
slideUp();も、slideDown();と同じように書きます。
$("スライドさせたい要素").slideUp();
slideUp();の場合は、すでに表示されている要素に対して指定することで、スライドしながら非表示になる動きをします。
引数などに関しても、slideDown();と同様です。
実際に動きを確認してみましょう。
See the Pen slideUp by ZeroPlus (@zeroplus-programming) on CodePen.
slideToggle()でスライドの表示・非表示をする
最後に紹介するのはslideToggle();です。 slideToggle();は、スライドで表示するslideDown();と、非表示にするslideUp();を組み合わせたものになります。
上の例では、クリックすると表示・非表示は一度しかできませんでしたが、このメソッドを使用すると、クリックで表示させたり、非表示にしたりを繰り返し切り替えることができるようになります。
実際にクリックしてみてください。
See the Pen slideToggle by ZeroPlus (@zeroplus-programming) on CodePen.
実装例
実際のWebサイトの中で、スライドさせる機能をよく使用する場面は、冒頭でも紹介した通りFAQ（よくある質問）の部分です。今回は実際にslideメソッドを使用して作成したFAQの例を紹介します。
コードを実際にみてみましょう！
See the Pen slide_sample by ZeroPlus (@zeroplus-programming) on CodePen.
まとめ
今回はjQueryのslideメソッドを使用して、要素をスライドさせながら表示/非表示させる方法を学びました。
Webサイトでは、全ての情報を最初から表示させてしまうと、情報量の過多によってユーザーが見づらいと感じてしまう可能性があります。slideメソッドも、それを避ける一つの方法として覚え、実践できるようにしていきましょう！
