jQueryオブジェクト .slideDown()

非表示になっているHTML要素を、徐々に大きくして表示する。

概要

jQuery オブジェクトの slideDown メソッドはオーバーロードされており、引数が異なる複数のメソッドが存在する。

jQueryObject.slideDown()

jQueryObject.slideDown(duration)

jQueryObject.slideDown(complete)

jQueryObject.slideDown(duration, complete)

jQueryObject.slideDown(object)

引数

duration

要素が表示されるアニメーションの時間を数値または文字列で指定する。数値で指定する場合は、時間をミリ秒単位で指定する。文字列で指定する場合は、"fast" または "slow" で指定する。

$("#id1").slideDown(1000);
$("#id2").slideDown("slow");

complete

アニメーションが完了したときに呼び出される関数を指定する。マッチした要素ごとに1回呼び出される。

object

追加オプションのマップを指定する。

$("#id3").slideDown({
  duration: 1000
})

使用例

slideDown メソッドの使用例を以下に示す。

HTML

<button id="slidedown">Slide down</button>
<button id="hide">Hide</button>
<img src="/javascript/img/portrait.jpg" id="img" style="display: none">

JavaScript

jQuery('#slidedown').click(function (){
  jQuery('#img').slideDown()
})
jQuery('#hide').click(function (){
  jQuery('#img').hide()
})

実行結果

参考文献

OpenJS Foundation 2023. .slideDown(). jQuery API Documentation