jquery fadeToggleメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery fadeToggle()メソッド

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

$("セレクタ").fadeToggle();
$("セレクタ").fadeToggle(時間);
$("セレクタ").fadeToggle(時間,イージング);

コールバック関数を指定する場合

$("セレクタ").fadeToggle(時間,イージング,コールバック関数);

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

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

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

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

jquery

$(function() {
	$("button").click(function(){
	$("#hoge").fadeToggle(2000,"linear");
	});
});
css
#hoge{
 background-color: #FFCC99;
 width: 250px; height: 250px;
 display: none;
 }

html

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

サンプル







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