jquery showメソッド

TOPページに戻る > jquery入門

jquery show()メソッド

showメソッドは、セレクタで指定した要素の表示をアニメーションできるメソッドです
できること
cssのdisplay:noneやhide()メソッドで非表示になっている要素を表示できる
引数は二つあって1つ目がアニメーションスピードを数字で指定します。1秒が1000です。2秒が2000で全てを表示します
2つ目の引数でコールバック関数を指定できます。コールバック関数とはアニメーションが終わったら実行される処理です。連続して動きをつけることができます

$("セレクタ").show();

引数を指定する場合

$("セレクタ").show(数字,コールバック関数);

コールバックを指定する例

$("セレクタ").show(1000,function(){
	表示するアニメーションが終わったあとに実行される処理
});

指定したHTML要素の表示をアニメーションしながら表示する

ボタンをクリックすると1秒でdiv要素が表示されたあとに、コールバック関数を呼び出して、連続で処理を実行します。今回はhide()メソッドで非表示にする処理を入れました

jquery

$(function() {
	$("button").click(function(){
	$("div#hoge").show(1000,function(){$(this).hide(2000)});
	});
});

css

#hoge{
 background-color: #FFCC99;
 display: none;
 width: 250px; height: 250px;
 }

html

<button>ボタン</button>
<div id="hoge"></div>

サンプル

ボタン

クリックするとゆっくり拡大しながら表示します。表示が終わったらコールバック関数でゆっくりと非表示になります

引数を指定しない場合の表示

アニメーションなしで、表示します。cssとHTMLは上と同じです

jquery

$(function() {
	$("button").click(function(){
	$("div#hoge").show();
	});
});

ボタン