ページ遷移、読み込み時にふわっと表示するjQueryプラグインを再び修正 [ 2012-02-06 ]
fadeMoverプラグインの解説ページを別途作成しましたので、下記ページをご覧ください。
jquery.fadeMover – Fadein and Fadeout for jQuery
——- 以下 [ 2012-02-06 ] 以前の内容です —-
[ 2012-02-06 追記 ] 最近このページのアクセスがかなり増えているので、記事を見直していたら、制作途中のものを記事にしてしまっていました。もしご利用をお考えになられていても「動かない…wtf…」となっていた方がおられたと思います。。。申し訳ありません。
作成途中で「ページ内リンクの動作禁止にしないと使えないよね、これ。。。」と気がつき、機能を付け足していたんですが、公開していたものが動作確認中の途中のスクリプトでした。それが原因でアンカーにclassを指定していたらまったく動作しないようになっていました。もし古いものをご利用されている方がいらっしゃいましたら修正していただければと思います。
//jquery.fademover.jsの23行目
if(!$(this).attr("class")){
//jquery.fademover.jsの23行目
if(!$(this).hasClass(setting.nofadeOut) && moveUrl.charAt(0) != "#"){
——- 以下 [ 2012-02-06 ] 内容修正済みです —-
以前作成していたページ遷移、読み込み時にふわっと表示するjQueryプラグインを修正しました。
ブラウザのバックボタンで戻った時にフェードアウトしたページが表示されない状態で保持されてしまっていたのですが、下記1行追加してきちんと表示されるようになりました。
window.onunload = function () {}
プラグインの動作は、
・ページ読み込み時にフェードインする。
・アンカーをクリックし次のページに移る前に現在のページをフェードアウトするというものです。
$(function(){
$('フェード処理する要素').fadeMover({'outSpeed':現在のページをフェードアウトするスピード,'inSpeed':ページ読み込み時のフェードインスピード,'effectType':どのエフェクトを利用するか指定,'nofadeOut','クリックしてもフェードアウトさせないアンカーに記述するclass名'});
$('body').fadeMover();
});
なにも指定しない場合はフェードイン、フェードアウト両方利用し、処理速度は1000ミリ秒(1秒)になっています。
effectTypeの指定は、指定なし(もしくは「1」)は両方、フェードインのみは「2」、フェードアウトのみは「3」となります。
effectTypeは分ける必要もないかなと思いつつ、もしかしたら使うかもってことで分けてあります。
nofadeOutはクリックしてもフェードアウト処理をさせないアンカータグに対して記述するclass名になります。初期値は「nonmover」になっています。これはページ内リンクに対応するために追加したものです。アンカーにclassを記述してください。もしアンカーのclass名に「nonmover」という文字を含む名前を使っている場合(nonmover1等)は、nofadeOutを別のものに指定してください。
[ 2012-02-06 追記 ] 「<a href=”#pagetop”>」等、#から始まるページ内リンクの記述の場合はclassを付ける必要がないように修正しました。
//下記のリンクは動作しません。 <a href="#pagetop">ページの先頭へ戻る</a> <a href="/img/big.jpg" class="nonmover">画像を開く</a>
[ 2012-02-06 追記 ] javascriptの読み込みの関係で、フェードインする前に全部表示されてから動作する場合があります。この場合フェード処理する要素のスタイル自体に「opacity:0」の記述をしておけば一番いいのですが、Javascriptを切っている場合、表示されなくなります。このあたりは少し悩ましいところですが、javascriptでhead要素にスタイルを追加する方法があります。
※ この記述はフェードアウトのみ利用の場合は必要ありません。
/*
jQueryのappendでhead内に対象要素のスタイルに「opacity:0」を追記
IE6〜8対応用に-ms-filter:"alpha( opacity=0 )";filter: alpha( opacity=0 );
$(function(){〜});の外に記述
*/
$('head').append('<style>#content { opacity: 0;-ms-filter:"alpha( opacity=0 )";filter: alpha( opacity=0 ); }</style>');
$(function(){
$('#content').fadeMover();
});
必ず「$(function(){〜});の外に記述」するようにして下さい。これで全部表示されることがなく、スームーズにフェードインするようになるはず。お試しください。
jquery.fademover.jsの中身は下記。
/* Copyright (c) 2011 detelu (http://www.detelu.com)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* jquery.fademover.js
* Version: 2012-02-06
*/
(function($){
$.fn.fadeMover = function(options) {
var defaults = {
'outSpeed': 1000,
'inSpeed': 1000,
'effectType': 1, // fadeIn only 2, fadeOut only 3
'nofadeOut' : 'nonmover' //fadeOut no thx (class name)
};
var setting = $.extend(defaults, options);
this.each(function() {
var pel = this;
if(setting.effectType == 1 || setting.effectType == 2) {
$(pel).css("opacity", 0).animate({opacity: 1}, setting.inSpeed);
}
if(setting.effectType == 1 || setting.effectType == 3) {
$('a').click(function(event) {
var moveUrl = $(this).attr("href");
if(!$(this).hasClass(setting.nofadeOut) && moveUrl.charAt(0) != "#"){
event.preventDefault();
$(pel).animate({"opacity": 0}, setting.outSpeed, function(){
location.href = moveUrl;
});
}
});
}
});
return this;
}
window.onunload = function () {};
})(jQuery);
プラグインを作ってみようと、ぱぱっと作ったものなので不具合はあるかもしれません。とりあへずZIPファイルを置いておきますので、ご利用の方はどーぞ。
fademover.zip (サンプルファイル等一式 107KB)
アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。