1:n - DETELU Blog > プラグイン

jquery.fadeMoverプラグインページを作成しました。

以前のjquery.fadeMoverプラグインの記事に不具合があった(というよりも単なるミスです。。。申し訳ないです。。。)ので、ちょっと機能アップを含め、別途ページを作成しました。

jquery.fadeMover – Fadein and Fadeout for jQuery

要素が複数あった場合に順番に処理する、という機能を新しくオプションでつけています。下記にデモページがあるんですが、ページ少し下の方にある「Box」と書かれている場所がぱらぱらとフェードインする、フェードアウトする感じになります。

jquery.fadeMover – demo4 順番にフェードイン
jquery.fadeMover – demo5 順番にフェードアウト

デモがわかりやすいように実行時間を長めに設定してるのでじれったい感じかもですが、もし利用の機会があれば、ご自身でスピードを変更して、いろいろ試してみてください。


あとページ読み込み時に全部表示されてからフェードインが実行されるのをなんとかしたい、という相談をいただいたんですが、Tipとして解決方法を掲載しています。もしお悩みの方がいらっしゃいましたら、下記「Tips」をお試しください。多少ましになるはずです。

jquery.fadeMover Tips

ページ遷移、読み込み時にふわっと表示する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 () {}

プラグインの動作は、
・ページ読み込み時にフェードインする。
・アンカーをクリックし次のページに移る前に現在のページをフェードアウトするというものです。

jquery.fademover.js サンプル

$(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)

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。