jQuery 要素をスライドしながら表示/非表示にするサンプル(slideToggle)

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

サンプル 

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

テスト1

コード

上記サンプルのコードです。
slideToggleメソッドは、要素が表示のとき、スライドしながら非表示にします。
要素が非表示の時、スライドしながら表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スライドのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	$("#button1").click(function() {
		// 表示のときは、非表示にします。
		$("#p1").slideToggle();
		// 非表示の時、表示します。
		$("#p1").slideToggle();
	});
});
</script>
</head>
<body >
<p id="p1">テスト1</p>
<input type="button" value="ボタン1" id="button1"  /><br/>
</body>
</html>

slideToggleメソッド

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

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

slideToggleメソッドの引数に数値を設定すると表示または非表示になるまでの秒数になります。
設定する単位はミリ秒です。
以下のサンプルでは1秒(1000ミリ秒)かけて表示と非表示にします。

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

サンプルです。

テスト2

関連の記事

jQuery 要素を表示/非表示にするサンプル(showとhide)
jQuery 要素を表示/非表示にするサンプル(toggle)
jQuery 要素をスライドしながら表示/非表示にするサンプル(slideUpとslideDown)
jQuery 要素をフェードイン/フェードアウトするサンプル(fadeIn/fadeOut)
jQuery 要素をフェードイン/フェードアウトするサンプル(fadeToggle)

△上に戻る