jquery fadeOutメソッド

TOPページに戻る > jquery入門

jquery fadeOut()メソッド

fadeOutメソッドは、セレクタで指定した要素をフェードアウトアニメーションで非表示にできるメソッドです
引数は二つあって1つ目がアニメーションスピードを数字で指定します
1秒が1000です。2秒が2000で全てを非表示にします
2つ目の引数でコールバック関数を指定できます。コールバック関数とはアニメーションが終わったら実行される処理です。連続して動きをつけることができます
第一引数の値には数字の他に"fast"、"normal"、"slow"などの文字列も指定できますfastが200、slowが600、省略した場合はnormalになります（400）

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

引数を指定する場合

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

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

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

指定したHTML要素の表示をフェードアウトアニメーションで非表示にする

ボタンをクリックすると指定したdiv要素をフェードアウトしながら2秒で非表示になります

jquery

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

css

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

html

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

サンプル

ボタン

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

引数を指定しない場合は0.4秒で非表示になります。cssとHTMLは上と同じです

jquery

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

ボタン