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',
以上です。これで痒いところに手が届くようになりましたかね？
Comment Form