jQuery入門講座使い方-フェード処理

フェード処理

フェードイン/フェードアウト

フェードの説明の前にトグルボタン（スイッチ）の確認をしましょう。ライブの機能は必要ないので、２章で学んだtoggleメソッドを利用しました。サンプル（03/01_01.html）を開いて、body内にボタン用のdiv(id=fadeButton)とフェードさせるdiv (id=fadeTarget)があることを確認してください。

jQuery部分では以下の様にtoggleメソッドを利用してfadeOutFuncとfadeInFuncを交互に実行するようにしています（最初はフェードアウトさせるのでfadeOutFuncを先に書いています）。実際に青いdivをクリックして「フェードアウトします」と「フェードインします」が交互に表示されることを確認してください。

function fadeOutFunc() {
	alert("フェードアウトします");	
}
function fadeInFunc() {
	alert("フェードインします");	
}		
$(function () {	
	$("#fadeButton").toggle(fadeOutFunc, fadeInFunc);			
});

では実際にfadeOutFuncとfadeInFuncにフェード処理を書いていきましょう。サンプル（03/01_02.html）を開いて下さい。以下の様にフェードインを行うメソッドはfadeInメソッド、フェードアウトを行うメソッドはfadeOutメソッドです。たったこれだけでフェード処理が実現できてしまうのです。

function fadeOutFunc() {
	$("#fadeTarget").fadeOut();
}
function fadeInFunc() {
	$("#fadeTarget").fadeIn();
}

フェード速度（時間）の設定

fadeIn/fadeOutメソッドは（）内にミリ秒を指定することでフェード速度を設定することができます。jQueryではアニメなどの速度は演出にかける時間で指定します（時間の単位は全てミリ秒ということに注意）。
サンプル（03/01_03.html）では3000と指定しているので、３秒かけてフェードされます。

function fadeOutFunc() {
	$("#fadeTarget").fadeOut(3000);
}
function fadeInFunc() {
	$("#fadeTarget").fadeIn(3000);
}

jQueryでは実行開始したアニメは完了するまで次のアニメを再生しません。そのためフェードアウトの途中でdivをクリックしても、フェードアウトが完了するまでフェードインしないことを確認してください。この仕様については変更できるのでstopメソッド(1)のページで説明します。

とても便利なfadeToggleメソッド

これまでのサンプルはtoggleイベントを利用しましたが、フェード処理にはトグル機能を持ったfadeToggleメソッドという便利なメソッドがあります。サンプル（03/01_04.html）を開きjQueryを確認してください。まずチェックするのはtoggleイベントではなく、clickイベントになっている点です（以下のソース1行目）。

$("#fadeButton").click(function (){
	$("#fadeTarget").fadeToggle(500);
});

次に上記の２行目を確認してください。ここにfadeToggleメソッドが利用されています。このメソッドは対象が消えているときはフェードイン、消えていないときはフェードアウトと状態に合わせて自動的に処理するのです。とても便利なので覚えておきましょう。またサンプルでは時間指定（500）がされていますが、fadeIn/fadeOutメソッドと同じように省略することができます。

フェードの注意点

パソコンにとってグラフィックの描画は非常に負荷が掛かります（そのため大抵のPCではグラフィックを専門に処理するGPUを搭載しています）。その中でも透明度の処理は重く、これを軽減するためにプログラマーは様々な工夫をすることになります。実際jQueryでも透明となり、見えない要素は表示しないようにしています（display:noneを利用している?）。

そのためフェードアウト後にレイアウトが崩れる場合があります。サンプル（03/01_05.html）を開いて、ボタンのdivが下に配置されているのを確認してください（jQueryはサンプル03/01_02.htmlと同じです）。次にボタンをクリックしフェードアウトが完了すると、ターゲットのdivは消されてしまうためボタンが上に移動してレイアウトが崩れてしまいます。

ですのでコンテンツ制作でフェードアウトを予定している場合はサンプル（03/01_06.html）のように、あらかじめ固定したdivなどで保護する必要があります。サンプル03/01_05.htmlではサイズが固定されたdiv(id=fixedBox)によってフェードするdivを囲み、レイアウトが変化しないようにしています。

指定した透明度にするfadeToメソッド

fadeToメソッドを利用すると、要素を指定した透明度にすることができます。サンプル（03/01_07.html）を開いてください。fadeOutFuncやfadeInFuncの処理が以下の様に書き換えられています。fadeToメソッドでは引数を２つ必要になります。最初の値は速度（ミリ秒）で、２つめが透明度です。透明度は１（不透明）〜０（透明）までの数値で指定します。。

function fadeOutFunc() {
	$("#fadeTarget").fadeTo(500,0.2);
}
function fadeInFunc() {
	$("#fadeTarget").fadeTo(500,0.8);
}

私はfadeToメソッドは利用を避けた方がよいと考えています。先に述べたように透明度の設定はPCに負荷をかけるので、アニメの処理速度に影響（スムースに動かない等）を与える可能性があるからです。これを避けるためにfadeOutメソッドでは透明になったら表示しないようにしました。しかしfadeToメソッドではサンプル（03/01_08.html）のように透明度を0にしても存在し続けます（レイアウトが崩れないことから消えていないことが確認できます）。

透明度設定の注意点: 透明度を設定した要素はPCに大きな負荷をかけます。負荷が掛かりすぎるとアニメがカクつくなどの弊害が出るので多用しないようにしましょう。

次回は一時期よく利用されたスライド処理について説明します。

次のページ：スライド処理