jquery fadeToメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery fadeTo()メソッド

fadeToメソッドは、セレクタで指定した要素のフェードアウトするときの透明度のアニメーションを調節できるメソッドです
引数は3つあります
1つ目がアニメーションスピードを数字で指定します。1秒が1000です。2秒が2000でアニメーションが完了します
2つ目が透明度の設定です。どこまで透明にするか設定します。0が透明で1に近づくほど表示が濃くなります。0.5は半透明、0.67だと67%表示になります、1だと100%表示します
※透明度を0にしても要素の幅や高さなどの領域は保っています
3つ目の引数でコールバック関数を指定できます。コールバック関数とはアニメーションが終わったら実行される処理です。連続して動きをつけることができます
※第一引数の値には数字の他に"fast"、"normal"、"slow"などの文字列も指定できますfastが200、slowが600、normalが400

2つ引数を指定する場合

$("セレクタ").fadeTo(時間ミリ秒,透明度);

3つ引数を指定する場合

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

3つ引数を指定する例

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

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

ボタンをクリックすると指定したdiv要素をフェードアウトしながら2秒で設定した透明度になります。今回は半透明になります

jquery

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

html

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

サンプル







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