メソッド slideDown

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

構文

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

.slideDown(期間);

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

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

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

.slideDown();

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

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

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

.slideDown(オプション);

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

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

例

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

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

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

メソッド slideDown

構文

例

関連項目