[JS]使い方も簡単、画像をフェードで切り替える超軽量スクリプト -hoverFade

既存のページに導入するのも簡単な画像をフェードで切り替えるスクリプトをDan Wellmanから紹介します。

jQuery Plugin – hoverFade
デモ

デモは上記ページのヘッダのナビゲーション（上キャプチャ）とフッタのアイコンで動作しています。

フッタのアイコン

実装方法

1. フェードで切り替える画像のエレメントに対して、hover時に画像が切り替わるように設定します。その際に使用するクラス名は「hover-css」が初期設定です（変更可能）。
   これはもしJavaScriptがオフの環境でも、ホバーがCSSで行われるようにするためです。
2. 次にスクリプト用のクラスを用意します。初期設定は「hover-anims」で、「hover-css」と同様に画像が切り替わるように設定します。
   これはスクリプトで利用するクラスで、その際にCSSのクラスは削除されます。
3. jquery.jsとhoverfade.jsを外部ファイルとして配置します。記述位置の理想はHTMLの終わりです。
4. HTMLにさきほどのCSS用のクラスを記述します。
   また、初期設定を変更する場合はオプションを変更します。

HTML

スクリプトのオプション

オプションではクラス名やトリガーを変更できます。

newClass

プラグインによって加えられるクラス名

初期値：hover-anims

classToRemove

CSS用のクラス名、プラグインによって削除

初期値：hover-css

onClass

ホバーの影響を受けるか受けないか

初期値：on

trigger

ホバーのアニメーションのトリガー

初期値：a

faderTemplate

アニメーションするエレメント

初期値：<span />