--- title: jQuery3.x時代のページ遷移時「ふわっと」フェードイン/フェードアウト tags: jQuery JavaScript Web HTML author: Nyanpy slide: false --- # 今までのフェードイン ページ遷移時にページ全体をふわっと表示(フェードイン)させる方法には、以下のHPのような方法がありました。 [【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。](http://on-ze.com/archives/341) (onzeさま) ```fadein_1.js $('head').append( '' ); $(window).on("load",function() { $('body').fadeIn(800).removeClass("is-hide"); }); ``` はいっ!ページ遷移時にフェードインできるようになりました。 # あとはフェードアウトだ! ページ遷移時にふわっとページを消す(フェードアウト)のもやりましょう。 まずはhtmlでリンクを設定。 ```fadeout.html ボタンとか画像とか? ``` 上記で```fadelink```という```class```を設定しました。 これを使って、 ```fadeout.js $(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ミリ秒のこと)リンク先への移動を待ちつつ、ページ全体をフェードアウトさせることができました。 ついでにブラウザバック等をした時の挙動も設定しておきましょうか。 ```pageshow.js $(window).on("pageshow",function() { if (event.persisted) { window.location.reload(); } }); ``` これでブラウザバック時もリロードされて、フェードインでページが表示されるようになりました。 #まとめ 「ページをふわっと表示させて、移動時にふわっと消す」まとめです。 ```fade.html なんか内容〜 ボタンとか画像とか? ``` ```fade.js $('head').append( '' ); $(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; }); }); ``` 問題点・改善点等ございましたらご連絡ください。