jQuery 要素を表示/非表示にするサンプル(showとhide) |

jQueryの要素を表示または非表示にするサンプルです。
showメソッドとhideメソッドを使用します。

サンプル

jQueryのshowメソッドとhideメソッドのサンプルです。
ボタン1を押すと、showメソッドでP要素の文字を表示します。
ボタン2を押すと、hideメソッドでP要素の文字を非表示にします。

テスト１

コード

上記サンプルのコードです。
10行目のhideメソッドで初期表示は非表示にしています。
15行目のshowメソッドで27行目のP要素の文字を表示します。
21行目のhideメソッドで非表示にします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// 初期表示は、非表示にする
	$('#p1').hide();

	// ボタン1を押したとき
	$("#button1").click(function() {
		// 表示する
		$("#p1").show();
	});

	// ボタン2を押したとき
	$("#button2").click(function() {
		// 非表示にする
		$("#p1").hide();
	});
});
</script>
</head>
<body >
<p id="p1">テスト１</p>
<input type="button" id="button1" value="ボタン1" /><br/>
<input type="button" id="button2" value="ボタン2" /><br/>
</body>
</html>

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

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

	// ボタン3を押したとき
	$("#button3").click(function() {
		// 1秒かけて表示する
		$("#p2").show(1000);
	});

	// ボタン4を押したとき
	$("#button4").click(function() {
		// 1秒かけて非表示にする
		$("#p2").hide(1000);
	});

上記コードのサンプルです。
ボタン3を押すと1秒かけて表示します。ボタン4を押すと1秒かけて非表示にします。

テスト２

showメソッド

jQueryのshowメソッドです。
要素を表示します。
以下はjQueryサイトのshowメソッドのページです。
http://api.jquery.com/show/

hideメソッド

jQueryのhideメソッドです。
要素を非表示にします。
以下はjQueryサイトのhideメソッドのページです。
http://api.jquery.com/hide/