クロスフェードができるjQueryプラグインInnerFade【jQuery】

ちょっと調べものをしていたら、InnerFade というjQueryプラグインを見つけましたので、紹介するまでもなかったかもしれませんが、気づけばブログを書いてましたので、このまま紹介させていただきます。

InnerFade

指定した要素に、繰り返しクロスフェードさせるjQueryプラグインです。

デモ

使い方

InnerFadeのサイトから「jquery.innerfade.js」をダウンロードして、 HTMLに読み込ませて、クロスフェードさせる要素を指定するだけです。

$(function(){
	$('#fade').innerfade();
});

オプションもいくつか用意されています。詳しくは、InnerFadeの サイトをご覧ください。ちなみにデモのほうでは、以下のようにspeedを指定しています。

$(function(){
	$('#fade').innerfade({speed:'slow'});
})

少し気になる点として、 InnerFadeのサイトのプレビューで使っているjQueryのバージョンが1.2.3となっています。
そのためかInnerFade自体それなりに前に作られたプラグインのようで、今でもメンテナンスされているかどうか不明です。

本ブログのデモでは、jQuery1.9.1を使って、iOS Safari、Chrome、Firefox(IEで未検証)で動いており、非推奨となっているAPIも使われていないっぽいので、今でも使えるプラグインだと思いますが、次のような報告のエントリーがありますので、一応注意してみてください。

InnerFade with JQueryの動作が速すぎる時はjQuery本体のバージョンを下げる