Javascript

【Javascript】jQueryのFadingエフェクト1

Javascript関連情報

更新日：2008年12月17日

jQueryのFadingエフェクト1

高橋登史朗

jQueryのエフェクトメソッドからFadingエフェクトについて紹介します。フェイドイン/フェイドアウトなどのメソッドで、今回はfadeInです。

前回、前々回は、jQueryのエフェクトメソッドからSlidingエフェクトを取り上げましたが今回はFadingエフェクトについて紹介します。

Fadingエフェクトについて

Effectsの種類については、jQueryのEffects 基本1の表のとおり現在(v1.2.6)は、大きく4種類用意されています。これらも show/hide , slideDown/slideUpなどと同様に jquery.jsを読み込むだけで、プラグインやUIなどを使わなくても利用できる手軽さが魅力のエフェクトです。

今回取り上げるFadingエフェクトは、DOM要素をフェイドイン/フェイドアウトするメソッド群です。

jQueryバージョン1.2.6現在、Fadingには、次の3種類があります。

Fadingの種類	機能
fadeIn( speed, callback )	マッチしたすべての要素をフェイドインします。引数で、アニメーションスピードと、動作完了後に起動させるコールバック関数を指定できます。
fadeOut( speed, callback )	マッチしたすべての要素をフェイドアウトします。引数で、アニメーションスピードと、動作完了後に起動させるコールバック関数を指定できます。
fadeTo( speed, opacity, callback )	マッチした要素を引数で指定した不透明度Opacityへフェイドします。引数で、アニメーションスピードと、動作完了後に起動させるコールバック関数も指定できます。

では、次ページからひとつずつサンプルを作って試しましょう。

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！