デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.fadeTo( )任意の透明度に変更

構文

要素の透明度を任意に変更返値:jQueryオブジェクト
jQo.fadeTo( 期間, 透明度 [,function] )ver1.0〜
jQo.fadeTo( 期間, 透明度 [,イージング] [,function] )ver1.4.3〜
fadeToメソッドはfadeInメソッドやfadeOutメソッドと異なり引数にオプションを設定することはできません。

機能

jQueryオブジェクトで指定した要素を任意の透明度にフェードで変更します。第1引数に期間を「ミリ秒」で設定することで、演出の速度を変更できます(期間を1000と設定すれば、1秒かけて要素を消します)。

透明度の値は0(透明)〜1(不透明)の間の値を設定します。引数の「期間」や「透明度」は省略することはできません。透明度の設定は0〜100でないことに注意して下さい

v1.4.3からは透明度とfunctionの間にイージングを設定して、フェードアウトの加速度を変更できます。

解説

任意の透明度に変更

fadeToメソッドは引数に期間と透明度を指定すると、指定した期間(ミリ秒)で指定した透明度にフェードします。サンプル(fadeTo/01.html)を開いてbody内にdiv要素が1つあることを確認してください。

jQueryは以下の様に記述され、div要素をクリックするとfadeToメソッドを利用してdiv要素を1秒(1000ミリ秒)かけて透明度0.5(50%)にフェードします。

$("div").click(function(){
	$("div").fadeTo(1000, 0.5);
});

結果としてdiv要素をクリックすると、div要素が半透明にフェードします。

コールバックの設定

最後の引数にfunctionを設定することで、隠した後にfunctionを実行することができます。
サンプル(fadeTo/02.html)を開いてbody内の構成がfadeTo/01.htmlと同じ事を確認してください。jQueryは少し変更されています。まずはfadeToメソッドを確認して下さい。以下の様に第2引数にfunction「upFunc」が設定されています。

$("div").click(function(){
	$("div").fadeTo(1000, 0.5, upFunc);
});

そしてupFuncは、以下の様にslideUpメソッドを利用して、縦方向に縮小して隠します。

function upFunc(){
	$("div").slideUp();
};

結果として、div要素をクリックすると1秒(1000ミリ秒)かけてdiv要素が透明度0.5(50%)にフェードします。その後でslideUpメソッドによって縦方向に縮小して消えます。

functionは無名関数を利用して、直接設定することができます。→サンプル(fadeTo/02b.html

$("div").fadeTo(1000, 0.5, function (){
	$("div").slideUp();
});

イージングの設定

v1.4.3からはfadeToメソッドの第3引数にイージングの設定が出来るようになりました。jQueryが利用できるイージングは「swing」と「linear」の2種類しかありません。デフォルトは「swing」です。イージングの種類はプラグインを追加することで増やすことができます。

サンプル(fadeTo/03.html)を開いてbody内の構成がfadeTo/02.htmlと同じ事を確認してください。jQueryもほとんどfadeTo/02.htmlと同じで、異なるのは以下の様に第3引数にイージング「linear」が追加された点だけです(functionは第4引数にずれます)。

$("div").click(function(){
	$("div").fadeTo(1000, 0.5, "linear", upFunc);
});

結果として、div要素をクリックすると「等速」でアニメが再生され透明度0.5(50%)にフェードします。その後でslideUpメソッドによって縦方向に縮小して消えます。

イージングについてはプラグイン(未完成)のページで紹介する予定です。

描画負荷に注意

jQueryではhideメソッドslideUpメソッドfadeOutメソッドによって隠された要素はcssのdisplay設定をnoneにして要素を表示しないようにします。そうして描画する要素を減らすことで負荷を軽くする工夫がしてあるのです。

このことが確認できるサンプルとしてfadeOutメソッドのサンプル(fadeOut/05.html)があります。開いてbody内に2つのdiv要素があることを確認して下さい。区別できるようにcss設定で背景色を青(testのid属性)と赤(redのid属性)にしています。jQueryは以下の様に記述され、青いdiv要素をクリックするとfadeOutメソッドを利用してフェードアウトするようにしています。

$("div.test").click(function(){
	$("div.test").fadeOut();
});

青いdiv要素をクリックするとフェードアウトしてdiv要素が隠れるのですが、このとき下に配置された赤いdiv要素が上に移動することを確認して下さい。これは青いdiv要素のフェードアウトが完了したためcssのdisplay設定がnoneになり消されたためです。

しかしfadeToメソッドには、透明度を0に設定してフェードアウトさせてもdisplayの設定はnoneになりません。透明のままで存在し続けます

サンプル(fadeTo/04.html)を開いてbody内の構成がfadeOut/05.htmlと同じ事を確認してください。jQueryもほとんど同じで、以下の様にfadeOutの代わりにfadeToを利用して透明度を0に設定しています。

$("div.test").click(function(){
	$("div.test").fadeTo(1000, 0);
});

このサンプルでは青いdiv要素をクリックしてフェードアウトした後も、赤いdiv要素が上に移動しません。これはフェードアウトが完了してもcssのdisplay設定がnoneにならないためです。

隠れている要素はdisplayの設定をnoneにしたほうが負荷が軽いので、フェードアウトにfadeToメソッドを利用するのはあまりよくありません。透明度を0にする時はfadeToメソッドではなくfadeOutメソッドを利用するようにして下さい。

fadeOutメソッドを利用しても赤いdiv要素が移動しないようにすることは可能です。fadeOutメソッドのサンプル(fadeOut/05b.html)を確認してください。

関連項目

要素をフェードアウトして隠したい場合はfadeOutメソッドを利用します。
隠れた要素をフェードインして表示したい場合はfadeInメソッドを利用します。
また、fadeToggleメソッドを利用すると、要素が表示されている時は隠し、隠れている時は表示します。

メモ

期間の設定について

第1引数の期間を設定するところでは「slow」「fast」といったキーワードも利用することができます(fastは200ミリ秒、slowは600ミリ秒)。サンプル(fadeTo/test01.html)では以下の様に引数に「slow」を設定しています(文字列なのでクォートを忘れずに)。

$("div").click(function(){
	$("div").fadeTo("slow", 0.5);
});

結果として、div要素をクリックすると「ゆっくりめ」にフェードします。

複数の対象にも対応しています

セレクタに一致する要素が複数あっても、fadeToメソッドでまとめて隠すことができます。
サンプル(fadeTo/test02.html)を開いてjQueryがfadeTo/01.htmlと同じ事を確認して下さい。body内の構成は変更され、div要素が3つに増えています。

<body>
	<div></div>
	<div></div>
	<div></div>
</body>

結果として、どのdiv要素をクリックしても全てのdiv要素が隠れます。

コールバックでフェードインできない?

コールバックのサンプルを作成している時に気が付いたのですが、コールバックのfunction内でfadeInメソッドが効かないことに気が付きました。サンプル(fadeTo/test03.html)を開いてbody内の構成がfadeTo/02.htmlと同じ事を確認してください。jQueryは少し変更され、コールバックのfunction内に以下の様にfadeInメソッドを利用しています。

function inFunc(){
	$("div").fadeIn();
};

これでdiv要素をクリックしたら透明度0.5(50%)にフェードします。その後でfadeInメソッドに再び100%で表示されるはずなのですが、実際は機能しません...。バグでしょうか?

ちなみにfunction内の処理をfadeOutメソッドに変更したら機能しました。またfadeToメソッドで透明度を1.0(100%)にした時も機能しました。→サンプル(fadeTo/test03b.html