jQueryオブジェクト .slideDown()

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

目次

  1. 構文
  2. 引数
  3. 例
  4. 関連項目
  5. 参考文献

構文

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

jQueryObject.slideDown()
jQueryObject.slideDown(duration)
jQueryObject.slideDown(complete)
jQueryObject.slideDown(duration, complete)
jQueryObject.slideDown(duration, easing, complete)
jQueryObject.slideDown(options)

引数

duration
要素が表示されるアニメーションの時間を数値または文字列で指定する。数値で指定する場合は、時間をミリ秒単位で指定する。文字列で指定する場合は、"fast" または "slow" で指定する。 
$("#id1").slideDown(1000);
$("#id2").slideDown("slow");
complete
アニメーションが完了したときに呼び出される関数を指定する。マッチした要素ごとに1回呼び出される。
easing
アニメーションの速度変化のタイプ（イージング関数）を文字列で指定する。イージングとは、アニメーションの速度パターン（緩急）を指定するオプションである。これにより、単調な動きではなく、より自然で視覚的に魅力的なアニメーションを実現できる。 jQueryが標準で提供しているイージング関数は以下の２種類である。
イージング関数
関数 説明
swing アニメーションの開始時と終了時が遅く、中間が速くなる。（デフォルト）
linear アニメーションの開始から終了まで一定の速さで変化する。
options
オプションをオブジェクトで指定する。
オプション
プロパティ 説明
duration アニメーションの実行時間
easing イージング関数
queue アニメーションをエフェクトキューに配置するかどうかを示すブール値
specialEasing プロパティ引数で定義された1つ以上のCSSプロパティと、それに対応するイージング関数を含むオブジェクト
step 各アニメーション要素の各アニメーションプロパティに対して呼び出される関数
progress アニメーションの各ステップ終了後に呼び出される関数
complete 要素のアニメーションが完了した際に呼び出される関数
start 要素のアニメーションが開始されたときに呼び出す関数
done 要素のアニメーションが完了した際に呼び出される関数
fail 要素のアニメーションが完了しなかった場合に呼び出される関数
always 要素のアニメーションが完了したとき、または完了せずに停止したときに呼び出される関数

jQueryオブジェクト slideDown メソッドにオプションを指定する例を次に示す。

$("#id3").slideDown({
  duration: 400,
  easing: 'linear',
  queue: true
})

例

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();
});

実行結果

関連項目

参考文献