jquery hideメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery hide()メソッド

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

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

引数を指定する場合

$("セレクタ").hide(時間ミリ秒,コールバック関数);

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

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

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

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

jquery

$(function() {
	$("button").click(function(){
	$("div#hoge").hide(1000,function(){
	$(this).show(2000)
	});
	});
});
css
#hoge{
 background-color: #FFCC99;
 width: 250px; height: 250px;
 }

html

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

サンプル



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

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

引数を指定しない場合はアニメーションなしで表示を消します。cssとHTMLは上と同じです

jquery

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






(C)2012 ホームページ作成無料