kojilow Blog

Re:designのサイトで設置した、jQueryを使用してページ遷移時にフェードイン・フェードアウトさせる方法

//インラインCSSで#wrapper{display;block;}を追加
$(‘head’).append(‘<style type=”text/css”>#wrapper{display;none;}</style>’);
$(function(){
//読み込み時にフェードイン
$(‘#wrapper’).fadeIn(1000);
//aタグクリック時にフェードアウト実行
$(‘#navi a, a.windowFade’).click(function(){
var url = $(this).attr(“href”);
$(‘#wrapper’).animate({“opacity”:0},1000,function(){
location.href = url;
});
return false;
});
});

<div id=”wrapper”>等で全体を囲んで、そのdivをインラインCSSでdisplay:none;にする。
外部のCSSでdisplay:none;を記載するとjavascriptオフの時に見えなくなるからjsでインラインCSSを追加する。

aタグをクリック時にフェードアウトさせてページ遷移を実行させるんだけど、$(‘a’).click…とかにすると全部のaタグに反映されて_blankのリンクとかまでフェードアウトしてしまうのでナビゲーションやwindowFadeのクラスを付けたaタグのみ実行させる。

ただこの書き方だとlavalampとかのプラグインを使用しているとおかしくなるので別の方法が必要。
Re:designはこっち。

$(‘head’).append(‘<style type=”text/css”>#wrapper{visibility:hidden;}</style>’);
$(function(){
//bodyに<div id=”fade”></div>追加
$(‘#wrapper’).after(‘<div id=”fade”></div>’);
//ie6 position:fixed
if(jQuery.browser.msie && jQuery.browser.version < 7){
$(window).scroll(function(){
var top = $(this).scrollTop();
$(‘#fade’).css(‘top’,top);
});
}
//wrapperをvisibility:visibleに
$(‘#wrapper’).css(‘visibility’,'visible’);
//読み込み時にアウト
$(‘#fade’).fadeOut(1000);
//aタグクリック時にフェードイン実行
$(‘#navi a, a.windowFade’).click(function(){
var url = $(this).attr(“href”);
$(‘#fade’).fadeIn(1000,function(){
location.href = url;
});
return false;
});
});

#fade {
position:absolute; /* ie6 */
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
}

イメージとしては画面の1番上に<div id=”fade”></div>をのせて、それを画面遷移時にフェードイン・アウトさせる感じ。

内容としては、
1. <div id=”wrapper”>にvisibility:hidden;を追加。
2. <div id=”fade”></div>を<div id=”wrapper”>の後に追加。
3. <div id=”wrapper”>をvisibility:visible;に。
4. <div id=”fade”></div>をフェードアウト。
5. aタグクリック時に<div id=”fade”></div>をフェードインさせる。

こんな感じでページ遷移時のフェードイン・フェードアウトを実装できると思います。