メソッド slideDown

メソッド slideDown は、非表示の要素を上から下にスライドさせてスムーズに表示します。要素を非表示にするには、 メソッド slideUp を使用できます。

構文

指定された時間（デフォルトは 400ms）で表示します：

javascript.slideDown(期間);

時間はミリ秒だけでなく、キーワード slow (600ms) と fast (200ms) でも指定できます。値が大きいほど、 アニメーションは遅くなります：

javascript.slideDown('slow' または 'fast');

パラメータを指定しない場合、アニメーションは行われず、 要素は瞬時に表示されます：

javascript.slideDown();

2番目のパラメータとしてイージング関数、3番目のパラメータとしてコールバック関数 （アニメーション完了後に実行）を渡すこともできます。両方のパラメータはオプションです：

javascript.slideDown(期間, [イージング関数], [コールバック関数]);

JavaScriptオブジェクトの形式で、キー: 値 のペアを含む 様々なオプションをメソッドに渡すことができます：

javascript.slideDown(オプション);

このようなオブジェクトは、次のパラメータと関数を渡すことができます - duration、easing、queue、specialEasing、 step、progress、complete、start、 done、fail、always。これらのパラメータの説明は、 メソッド animate で確認できます。例えば、 期間とイージング関数を設定しましょう：

javascript.slideDown( {duration: 600, easing: easeInSine} );

例

ボタンをクリックした後、非表示の段落をメソッド slideDown でスムーズに表示しましょう。 キーワード slow を渡すことで、速度を 600ms に設定します。 アニメーション終了後、コンソールに 'Animation complete' を出力します：

html<button>テキストを表示</button>
<p style="display: none">テキスト</p>

javascript$('button').click(function() {
  $('p').slideDown('slow', function() {
    console.log('アニメーション完了')
  });
});

関連項目