ywork2020.com

Title

非表示の要素を表示する

目次 (INDEX)

showとは

ここで説明する show とは次の語句からなるjQueryのメソッドです。
show
読み: ショウ
意味: 示す、見せる、姿を表す

目次に戻る

showメソッドの概要

このメソッドは、非表示状態の呼び出し元の要素を表示します。

引数に数値でミリ秒を設定することで、表示が完了するまでの時間を指定することができます。 時間を指定することで、要素はアニメーションしながら表示状態に遷移します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$(Selector).show(speed);

目次に戻る

サンプルコードと実行結果

ここでは非表示状態のdiv要素を showメソッドを使って表示してみます。予め div要素はCSSを使って非表示に設定されています。ボタンをクリックすると表示処理を行うようにしています。

サンプルコード: CSS
<style>
	div{
		display: none;
		color: ##white;
		background-color: ##deeppink;
		height: 100px;
		text-align: center;
		width: 100px;
	}
</style>
  • 03: display: none; (この要素を非表示に設定します。)
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div>Element</div>
	<button id="idButton">show (表す)</button>
	<script>...</script>
</body>
  • 06: div (ここでは、この要素をshowメソッドを使って表示します。)
  • 07: button (ボタンです。クリックすると、scriptの 02 ~ 04行のコードを実行します。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$("div").show(1000);
	});
</script>
  • 03: show(1000) (呼び出し元の要素を1000ミリ秒 (1秒) かけて表示します。)
実行結果:
Element

目次に戻る