jQueryでページ遷移時にフェードインフェードアウトの効果をつける

  • 投稿日
  • 更新日
  • 著者 kngsmym
  • カテゴリー jQuery

jQueryのfadeInを使ってページ遷移時のフェードインフェードアウトをやってみましたので自分的メモ。

こちらのコードを参考にさせていただきました。

ページ遷移時にフェードイン・フェードアウト

※IEなどについて補足しました　20111206
jQueryでページ遷移時にフェードインフェードアウト・・・の補足

コード

jQueryを読み込んで、以下のコードをheadに記述します。
フェードさせたい要素を#wrapで囲っているという前提です。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$('head').append('<style type="text/css">#wrap{display:none;}</style>');
function windowFade(){
	$('#wrap').fadeIn(300);
	$('a').click(function(){
		var url = $(this).attr("href");
		$('#wrap').animate({"opacity":0},300,function(){
			location.href = url;
		});
		return false;
	});
};
		
window.onload = function() {
	windowFade();
};

window.onunload = function() {
	windowFade();
};
</script>

まず4行目。
fadeInが機能するためには要素がまず消えてないといけないですが、display:noneをcssファイルに書くとJSオフのときに消えたままになってしまうので、フェードさせたい要素へのdisplay:noneを動的にheadに差し込みます。

5行目。
フェード処理をfunctionにまとめてます。これ、直に書いても動くんですが、こうした理由は後述します。

6行目
フェードイン処理です。

7行目
フェードアウト処理です。aタグをクリックしたらそのaタグのURLを取得して、フェードアウトし終わったらそのURLに遷移しています。この記述だと、aタグになんでもかんでも反応してしまうので、特定のリンクに関してのみ反応させたい場合は、classやidを振って、以下のように記述すればOKです。

$('#hoge a').click(function(){

16行目。
読み込み時にフェードのfunctionを呼んでます。

20行目
ページを離れるときにフェードfunctionを呼んでいます。これが無いとsafariのbackボタンが正常に機能せず、戻って真っ白のままでとまってしまいます。もちろんiPadも。その対策としてのfunction化でした。

以上でフェードインフェードアウトが完了です。
参考にさせていただいたサイトの方によれば、他のプラグインを使った場合に上記の書き方では上手くいかないことがあるようです。ご参考までに。

以下は20111210追記
一部外部リンクのみをフェードさせたくないときは、フェードさせるfunctionの記述を_blankでないとき限定、とかにしちゃえばいいです。具体的には下のような感じ。フェードさせない要素を特定のidで指定する、なんかのときにはattrの対象をtargetではなくidにして、比較する文字列に、そのid名を入れてやるとかでいいと思います。

function windowFade(){
	$('#wrap').fadeIn(300);
	$('a').click(function(){
		if($(this).attr("target")!='_blank'){
			var url = $(this).attr("href");
			$('#wrap').animate({"opacity":0},300,function(){
				location.href = url;
			});
			return false;
		}
	});
};

余談

余談ですけど、DreamWeaverのコード補完が効かないときがあってなんでだろうと思っていたら、これ書いててなぞが解けました。windowsの場合、半角モードに種類があって、モード次第では補完が動かないんですね。タスクバーの表示によれば、

[_A 無]　補完無効
[ A 般]　補完有効

ってことみたいです。気づいてよかったー。めんどくさかったんですよね。

javascript jQuery