jQuery slideUp/slideDown スライドで表示/非表示

jQueryの要素をスライドしながら表示または非表示にするサンプルです。

サンプル	slideUp/slideDownメソッド
	スライドしながら表示/非表示にする
	表示/非表示の秒数を設定する
	slideToggleメソッド(表示非表示を自動判定する)

slideUp/slideDownメソッド

.slideUp( [duration ] [, complete ] )

.slideDown( [duration ] [, complete ] )

jQueryのメソッドです。
slideUpメソッドは、要素を上にスライドしながら非表示にします。
以下はjQueryサイトのslideUpメソッドのページです。
http://api.jquery.com/slideUp/
slideDownメソッドは、要素を下にスライドしながら表示します。
以下はjQueryサイトのslideDownメソッドのページです。
http://api.jquery.com/slideDown/

スライドしながら表示/非表示にする

slideUpメソッドとslideDownメソッドのサンプルです。
ボタン1を押すと上にスライドしながらP要素の文字を非表示にした後、下にスライドしながらP要素の文字を表示します。

テスト１

上記サンプルのコードです。

<p id="p1">テスト１</p>
<input type="button" value="ボタン1" id="button1"  />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button1").click(function() {
		// 上にスライドしながら非表示にする
		$("#p1").slideUp();
		// 下にスライドしながら表示する
		$("#p1").slideDown();
		// メソッドを並べて書くことができる
		//$("#p1").slideUp().slideDown();
	});

</script>

9行目のslideUpメソッドで上にスライドしながら文言を非表示にします。
11行目のslideDownメソッドで下にスライドしながら文言を表示します。
13行目は、メソッドを横に並べて書いています。最初に上にスライドして非表示になり、次に下にスライドして表示します。

表示/非表示の秒数を設定する

表示/非表示の秒数を設定するサンプルです。
ボタン2を押すと1秒かけて表示し1秒かけて非表示にします。

テスト２

上記サンプルのコードです。

<p id="p2">テスト１</p>
<input type="button" value="ボタン1" id="button2"  />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button2").click(function() {
		// 上にスライドしながら非表示にする
		$("#p2").slideUp(1000);
		// 下にスライドしながら表示する
		$("#p2").slideDown(1000);
	});

</script>

9,11目は、1秒(1000ミリ秒)かけて表示/非表示にします。設定する単位はミリ秒です。

slideToggleメソッド(表示非表示を自動判定する)

.slideToggle( [duration ] [, complete ] )

jQueryのslideToggleメソッドです。
要素が表示のとき、スライドしながら非表示にします。
要素が非表示の時、スライドしながら表示します。
以下はjQueryサイトのslideToggleメソッドのページです。
http://api.jquery.com/slideToggle/

サンプルのコードです。

<p id="p1">テスト１</p>
<input type="button" value="ボタン1" id="button1"  />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button1").click(function() {
		// 表示のときは、非表示にします。
		$("#p1").slideToggle();
		// 非表示の時、表示します。
		$("#p1").slideToggle();
	});

</script>

9,11行目のslideToggleメソッドは、要素が表示のとき非表示にし、要素が非表示のとき表示します。

slideToggleメソッドの引数に数値をセットすると、その秒数をかけて表示/非表示にします。設定する単位はミリ秒です。1秒=1000ミリ秒です。