slideUpメソッド

メソッドslideUpは、要素を下から上へ巻き上げるように滑らかに非表示にします。要素を表示するには、 slideDownメソッドを使用します。

構文

指定時間（デフォルトは400ミリ秒）で非表示にします：

.slideUp(持続時間);

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

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

パラメータを指定しない場合、アニメーションはなく、要素は即座に非表示になります：

.slideUp();

2番目のパラメータとしてイージング関数、 3番目のパラメータとしてアニメーション完了時に実行されるコールバック関数を渡すこともできます。どちらのパラメータもオプションです：

.slideUp(持続時間, [イージング関数], [コールバック関数]);

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

.slideUp(オプション);

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

.slideUp( {duration: 800, easing: easeInSine} );

例

ボタンクリック後、 slideUpメソッドを使用して入力欄とボタンを含む親divを滑らかに非表示にしましょう（このdivは parentメソッドで見つけます）。キーワードslowを渡すことで、速度を600ミリ秒に設定します。 #testのdivにはメッセージ'Text is hidden'を表示します：

<div>
	<button>テキストを非表示</button>
	<input type="text" value="aaa">
</div>
<div id="test"></div>

$('button').click(function() {
	$(this).parent().slideUp('slow', function() {
		$('#test').text('テキストは非表示になりました');
	});
});

slideUpメソッド

構文

例

関連項目