Help us understand the problem. What is going on with this article?

jQuery3.x時代のページ遷移時「ふわっと」フェードイン/フェードアウト

More than 1 year has passed since last update.

今までのフェードイン

ページ遷移時にページ全体をふわっと表示(フェードイン)させる方法には、以下のHPのような方法がありました。

【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。 (onzeさま)

fadein_1.js
$('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で

fadein_2.html
<body class="is-hide">
  なんか内容〜
</body>

としておきます。
そしてjQuery。

fadein_2.js
$('head').append(
  '<style type="text/css">.is-hide{display:none;}</style>'
);

$(window).on("load",function() {
  $('body').fadeIn(800).removeClass("is-hide");
});

はいっ!ページ遷移時にフェードインできるようになりました。

あとはフェードアウトだ!

ページ遷移時にふわっとページを消す(フェードアウト)のもやりましょう。
まずはhtmlでリンクを設定。

fadeout.html
<a href=url class="fadelink">ボタンとか画像とか?</a>

上記で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
<!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>

fade.js
$('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;
  });
});

問題点・改善点等ございましたらご連絡ください。

Nyanpy
家でM5Stackが泣いている
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした