今までのフェードイン
ページ遷移時にページ全体をふわっと表示(フェードイン)させる方法には、以下のHPのような方法がありました。
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。 (onzeさま)
$('head').append(
'<style type="text/css">body {display:none;}'
);
$(window).load(function() {
$('body').fadeIn(800);
});
冒頭でCSSを記述して、ページ全体(body部)を{display:none;}で非表示にしています。これは、ブラウザの設定でJavaScriptが無効になっていた場合、画面に何も表示されないという事態を避けるためにjs内で記述しているのですね。
しかし、jQuery3.xでは動作しません。これはhide()/show()周辺の仕様が変更され、fadeIn()でCSSのdisplayをクリアできなくなったのが原因らしい。詳細は【翻訳まとめ】jQuery 3.0 alpha リリースノートでご解説されております。
(ちなみに上記コードの.loadもjQuery3.xでは使用できません。)
どうすりゃええねん
ページ全体を示す、例えばbodyあたりに新たにclassを用意して、それの取り外しで表示/非表示を制御しましょう。
これはjQuery 3.0時代のコーディングお作法 / show()/hide()編(to-Rさま)を参考にさせていただきました。
まずhtmlで
<body class="is-hide">
なんか内容〜
</body>
としておきます。
そしてjQuery。
$('head').append(
'<style type="text/css">.is-hide{display:none;}</style>'
);
$(window).on("load",function() {
$('body').fadeIn(800).removeClass("is-hide");
});
はいっ！ページ遷移時にフェードインできるようになりました。
あとはフェードアウトだ！
ページ遷移時にふわっとページを消す(フェードアウト)のもやりましょう。
まずはhtmlでリンクを設定。
<a href=url class="fadelink">ボタンとか画像とか?</a>
上記でfadelinkというclassを設定しました。
これを使って、
$(function(){
$('a.fadelink').on("click",function() {
var url = $(this).attr('href');
if (url != '') {
$('body').fadeOut(800);
setTimeout(function(){
location.href = url;
}, 800);
}
return false;
});
});
とします。これで、0.8秒間(上記の800は800ミリ秒のこと)リンク先への移動を待ちつつ、ページ全体をフェードアウトさせることができました。
ついでにブラウザバック等をした時の挙動も設定しておきましょうか。
$(window).on("pageshow",function() {
if (event.persisted) {
window.location.reload();
}
});
これでブラウザバック時もリロードされて、フェードインでページが表示されるようになりました。
#まとめ
「ページをふわっと表示させて、移動時にふわっと消す」まとめです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.x.x.min.js"></script>
</head>
<body class="is-hide">
なんか内容〜
<a href=url class="fadelink">ボタンとか画像とか?</a>
</body>
</html>
$('head').append(
'<style type="text/css">.is-hide{display:none;}</style>'
);
$(window).on("load",function() {
$('body').fadeIn(800).removeClass("is-hide");
});
$(window).on("pageshow",function() {
if (event.persisted) {
window.location.reload();
}
});
$(function(){
$('a.fadelink').on("click",function() {
var url = $(this).attr('href');
if (url != '') {
$('body').fadeOut(800);
setTimeout(function(){
location.href = url;
}, 800);
}
return false;
});
});
問題点・改善点等ございましたらご連絡ください。