menu

Creative Demos

訪問時にフェードイン、そして別ページへ遷移時にフェードアウト

  • 訪問時にフェードイン
  • 別ページへのリンクをクリックでフェードアウト

html

  • head内でjqueryの読み込み
              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
              
  • フェードインさせたい要素に任意のid
  • フェードアウト時のリンク。今回はli a※classなどで指定してもOKです。
              <div id="wrapper">
                <div id=""><p>フェードインさせたいコンテンツの内容</p></div>
                <ul>
                <!-- クリックイベントでli aをクリックするとフェードアウトしてから移動 -- >
                <li><a href="#">リンクa</a></li>
                <li><a href="#">リンクb</a></li>
                </ul>
              </div>
              

javascript

  • フェードインさせたいコンテンツをdisplay:noneをhead内に挿入し非表示にします
  • fadeinメソッドに表示速度を指定
  • クリックでフェードアウトさせたい要素を指定
              // フェードインで表示するコンテンツをdisplay:noneで非表示にする
              $('head').append('<style type="text/css">#wrapper{display:none;}</style>');
              $(function() {
                // フェードインidを指定と表示速度ミリ秒
                $('#wrapper').fadeIn(2000);
                // ページ遷移時にフェードアウトさせるclickイベントの要素を指定。ここではli a
                $('li a, a.windowFade').click(function() {
                  var url = $(this).attr("href");
                  // アニメーションで透過0になるまでフェードアウトさせる。速度ミリ秒
                  $('#wrapper').animate({"opacity": 0}, 1000, function() {
                    location.href = url;
                  });
                  return false;
                });
              });