jQuery 02-02: フェード処理

●fadeInメソッド / fadeOutメソッド

jQueryを利用するとフェードイン/フェードアウトが非常に簡単に実現できます。

sample : フェードイン / フェードアウト
http://www.designdrill.jp/jquery/02/step06.html
※青いdivをクリックするたび、オレンジのdivがフェードアウト/フェードインを繰り返します。

 
それではstep06.htmlのソースを確認してください。前回学んだトグルイベントを利用して
フェードイン / フェードアウトを繰り返すようにしています。今回のポイントは
トグルイベントの2つのfunction内に書かれたフェード処理用のメソッドfadeIn / fadeOutです。
リファレンス:fadeIn
リファレンス:fadeOut
 
fadeInとfadeOutはメソッドで、引数にはフェードにかける時間をミリ秒で指定します。
サンプルでは500としているので、500ミリ秒(0.5秒)でフェードします。また引数として
ミリ秒ではなく”slow”,”normal”,”fast”といったキーワードも利用できます。この場合は文字
としてダブルクオートで囲むことに注意してください。
・slowやfastを利用したフェードのサンプル
 
 
 

●フェード処理の注意点

パソコンにとってグラフィックの描画は非常に負荷が掛かります(そのため大抵のPCでは
グラフィックを専門に処理するGPUを搭載しています)。その中でも透明度の処理は重く、
これを軽減するためにプログラマーは様々な工夫をすることになります。実際jQueryでも
透明となり、見えない要素は表示しないようにしています(たぶんdisplay:none)。
flashの講座でも負荷を減らすためフェードアウト後にvisibleをfalseにしました。
 
そのためフェードアウト後にレイアウトが崩れる場合があります。サンプルstep07.htmlでは
divの順番を入れ替えてボタンのdivを下に移動しただけですが、フェードアウトが完了すると
オレンジ色のdivは消されてしまうためボタンが上に上がってレイアウトが崩れてしまいます。
http://www.designdrill.jp/jquery/02/step07.html
 
これに対処するのは簡単で、あらかじめ消えることを想定してcssやテーブルなどで
レイアウトしておきます。以下のサンプルstep07b.htmlではオレンジ色のdivを固定サイズ
のdivで囲んでいるためstep07.htmlのような問題は生じません。ソースを開いてhtml部分で
オレンジ色のdivが固定サイズのdivに囲まれていることを確認してください。
http://www.designdrill.jp/jquery/02/step07b.html
 
 
 

●指定した透明度にするfadeTo

最後に使いそうで使わない。また可能なら利用を避けるフェードのメソッドを紹介します。
それはfadeToメソッドで、指定した値の透明度にすることができます。
リファレンス:fadeTo ※透明度の指定は0〜1であることに注意してください

以下のstep08.htmlはfadeToのサンプルでtoggleイベントを利用してクリックする度に
透明度を変更(0 → 0.25 → 0.5 → 7.5 → 1)しています。サンプルのようにdivに配置
した画像もきちんとフェードさせることができます。
http://www.designdrill.jp/jquery/02/step08.html
 
前述したとおり透明度を設定したグラフィックの描画は負荷が高いため、可能なら利用を
避けた方がよいかもしれません。fadeOutは透明になったら表示されなくなるため負荷を
低くできるのですが、fadeToでは透明度を維持したまま表示され続けるので負荷が継続して
かかるのです。負荷が大きくなると低スペックのマシンでアニメがカクつくようになります。
 
再度fadeOutが透明になったあとに消していることを確認できるサンプルを用意しました。
step08b.htmlのソースを確認してください。変更しているのはtoggleイベントの最初の
function内の処理で、ここでfadeToの代わりにfadeOutを利用しているだけです。
http://www.designdrill.jp/jquery/02/step08b.html
 
step08.htmlではクリックして見えない(透明度0の)状態でもクリックして透明度を
0.25に変更できましたが、step08b.htmlでは最初クリックして透明になると次はクリック
できません。このことからもfadeOutでは透明にしたあとに消していることが確認できます。
逆に言えば、透明にしても表示され続けるfadeToを利用するのは負荷がかかるので利用を
控えるべきといえます。
 
 
次回はフェード以外の演出を説明します。
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


+ 9 = 十一


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>