jQuery 要素をスライドしながら表示/非表示にする(slideUp/slideDown)

jQueryの要素をスライドしながら表示または非表示にするサンプルです。
slideUpメソッドとslideDownメソッドを使用します。

目次

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

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

テスト1

コード

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

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

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

 

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

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

テスト2

コード

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

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

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

slideUpメソッド

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

slideDownメソッド

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

関連の記事

jQuery 要素を表示/非表示にする(show/hide)
jQuery 要素を表示/非表示にする(toggle)
jQuery 要素をスライドしながら表示/非表示にする(slideToggle)
jQuery 要素をフェードイン/フェードアウトする(fadeIn/fadeOut)
jQuery 要素をフェードイン/フェードアウトする(fadeToggle)
jQuery アニメーションの動きを追加する(animate)

△上に戻る