画像ファイル名末尾の_offという文字列を検索し、
マウスオーバーするとクロスフェードしながら
_onの文字列が付いた画像ファイルに置き換えます。
（もちろんプリロード機能も付いています）
jQuery等のライブラリは必要なく単独で動きます。
※最新版IEで動作しないバグを修正しました。（2013年8月29日）

※IETesterのIE6でクロスフェードが効かない方はこちらをご覧ください。

DEMO

ダウンロード

使用にあたっての注意

1. 再配布はご遠慮くださいませ
2. 改変は自由にしてくださって構いませんが、最上部にあるコメント部分は削除しないでください。
3. このスクリプトを使用し、何らかの問題が発生しても一切責任は負いません。
4. 使用に関しては自己責任でお願いいたします。
5. ご要望、バグなどございましたらお問合せフォームまで

設置方法1

head要素内にcrossfade.jsを読み込みます。

<script type="text/javascript" src="crossfade.js"></script>

設置方法2

下記を適当な場所へ記述してください。
※設定は「設定可能オプション」をご覧ください。
※オプションの最後は,を付けないでください。

var crossfade = new ATCrossfade({
	noOverClass : 'noover'
});
crossfade.load();

設定可能オプション

noOverClass : ‘noover’
クロスフェードさせたくないClass名が設定可能です
（初期値はnoover、nooverの場合この記述は必要ありません）

duration : 200
アニメーションの時間の長さです。
（初期値は200、200の場合この記述は必要ありません）

delay : 0
アニメーションまでの遅延時間です。
（初期値は0、0の場合この記述は必要ありません）

interval : 0
アニメーションを処理させるための一定間隔の時間です。
（初期値は0、0の場合この記述は必要ありません）

animation : ‘liner’
アニメーションの種類が設定可能です。liner、quinticOut、quinticInの3種類の動きが可能です。
（初期値はliner、linerの場合この記述は必要ありません）