jqueryって便利ですよね。お手軽にリッチっぽいサイトを作れますし。

 で、今回はjqueryのプラグイン、fadeMoverをもう少しだけ便利にしてみます。作業内容はメチャクチャ簡単です。

 

 「jquery.fadeMover.js」はページの遷移時にフェードイン・アウト効果を付けるためのプラグイン。それ以上でもそれ以下でもなく、ただそれだけのプラグインです。

 シンプルな分、プラグイン自体も軽いです。アニメーションとかを付けるなら「animsition.js」とかがありますけれど、機能が豊富ですから、もちろんファイルサイズはその分だけ大きくなります。

 必要な方はリンク先からダウンロードして下さいね。

 

 さて、この「jquery.fadeMover.js」ですが、何の設定をしなくても、ページ内リンク(「#」から始まるリンク)では動作しないようになっています。加えて、nofadeOutオプションで動作させないClassを追加指定することもできます。

 しかしながら、このnofadeOutオプションで指定できるClassは「ひとつだけ」です。IDは指定できません。これでは少し困ります。なので、IDも指定できるようにし、さらに複数指定できるようにします。まあ、簡単です。

 この処理をしているのは27行目

if(!$(this).hasClass(setting.nofadeOut) && moveUrl.charAt(0) != "#"){

 これです。

 setting.nofadeOutの内容をhasClass()でチェックしているようです。これをhasClass()からis()に変えます。

if(!$(this).is(setting.nofadeOut) && moveUrl.charAt(0) != "#"){

 終わりです。

 オプションの指定方法はそこまで代わりませんが、変更前と異なり、セレクタをしっかり入力する必要があります。

nofadeOut:'.class',
nofadeOut:'#id',

 こんな感じに。

 複数指定する場合は「,」で区切ります。

nofadeOut:'.class,#id',

 以上です。これで痒いところに手が届くようになりましたかね?