jQuery:ページアクセス、リンク時にフェードする方法

jQueryを使用してサイトアクセス時にページ内容をフェードインさせる方法と、
リンクをクリックした時フェードアウトしてからページ遷移する方法をメモします。

フェードインフェードアウトするのに下記のメソッドを使用しています。

fadeIn([speed], [callback])

指定した要素をフェードインして表示します。

fadeOut([speed], [callback])

指定した要素をフェードアウトして非表示にします。

※[callback]は処理終了時に実行する内容を記述します。


フェードイン、フェードアウトする方法

「wrapper」の内容がフェードインして表示されます。
また、リンクをクリックするとフェードアウトしてページ遷移します。

JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    // サイトアクセス時に非表示にしてから、フェードインさせる
    $('#wrapper').hide();
    $('#wrapper').fadeIn(2000);
    
    // リンククリック時にフェードアウトしてから、画面遷移する
    $('a').click(function(){
        // URLを取得する
        var url = $(this).attr('href');

        // URLが空ではない場合
        if (url != '') {
            // フェードアウトしてから、取得したURLにリンクする
            $('#wrapper').fadeOut(1000);
            setTimeout(function(){
                location.href = url;
            }, 1000);
        }
        return false;

    });
});
</script>

HTML

<body>
    <div id="wrapper">
        ページ内容を記載<br>
        <a href="http://raining.bear-life.com/">リンク</a>
    </div>
</body>

フェードイン、フェードアウトするスピードを調整する場合は、
fadeIn()」、「fadeOut()」、「setTimeout()」の数値を変更します。

また、コンテンツごとに設定することも可能なので、動きのあるサイトを作ることができると思います。

 

※下記、追記します。

aタグに「target=”_blank”」を付けていた場合、正常に動作しないのでフェードさせるリンクにclassを追加して調整しました。

JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    // サイトアクセス時にbodyを非表示にしてから、フェードインさせる
    $('#wrapper').hide();
    $('#wrapper').fadeIn(2000);
    
    // リンククリック時にフェードアウトしてから、画面遷移する
    $('a.fadelink').click(function(){
        // URLを取得する
        var url = $(this).attr('href');

        // URLが空ではない場合
        if (url != '') {
            // フェードアウトしてから、取得したURLにリンクする
            $('#wrapper').fadeOut(1000);
            setTimeout(function(){
                location.href = url;
            }, 1000);
        }
        return false;

    });
});
</script>

HTML

<body>
    <div id="wrapper">
        ページ内容を記載<br>
        <a href="http://raining.bear-life.com/" class="fadelink">リンク</a><br>
        <a href="http://raining.bear-life.com/" target="_blank">リンク</a>
    </div>
</body>

フェードさせるリンクに「class=”fadelink”」を追加しております。
そしてjQueryの処理で「$(‘a.fadelink’).click(function(){」の箇所を変更してます。

今までは、aタグをクリックした場合の処理を記述してましたがクラスが設定されているリンクの場合にしました。

 

■ サンプルページを追加しました。

【jQuery】ページアクセス、リンク時にフェードする方法|サンプルページ

 

  • このエントリーをはてなブックマークに追加

jQuery:ページアクセス、リンク時にフェードする方法” への4件のコメント

  1. ピンバック: ページ遷移時にちょっとフェードとかしてなんかオシャレにしたい | 8月31日(ほずのみや)

  2. 初めまして。
    ふわっと画面遷移する方法を調べていて、このページにたどり着きました。
    すごくいい感じなので、利用させていただこうと思います。

    なのですが、導入すると、[ target=”_blank” ]が効かなくなり、同じタブで開くようになってしまいました。
    もしかしたらこのコードが原因ではないかもしれないのですが、何か解決策がありましたら是非とも教えていただきたいです。
    私は、JQueryが書けないので、自分で解決できず申し訳ないのですが、助けていただけると幸いです。

    • solaさん
      コメントありがとうございます!

      今までの処理だと「target=”_blank”」がうまく動きませんでした。
      追記で内容を記載したので、確認してみてください。
      フェードさせるリンクにクラスを追加し、そのクラスが設定されているリンクの時だけ動作するように変更しています。

  3. ピンバック: ページ移動の時に、フェードイン フェードアウトの処理を導入するときにやったこと | 9ineBB

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です