ページ移動の時に、フェードイン フェードアウトの処理を導入するときにやったこと

ページ移動の時に、フェードイン フェードアウトの処理を導入するときにaタグを個別に制御した方法
このエントリーをはてなブックマークに追加
PR

新しいWEBサイト作成の時に、ページ移動の際にフェード処理をjQueryで行いました
そこで一つ問題がでました、ダウンロードリンクをクリックしたときにフェードアウトしたままで何も表示されないようになって、戻るのボタンも使えなくなり不便でした、また利用したコードでは_blankにしていてもblankにならなかったのでその時の対処です

 

こちらの記事のコードを利用させてもらいました

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

$(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;

    });
});

$(‘a’)のところで全てのaタグが指定になっているので
フェード処理をさせたくないリンクを除外するために :not()を使います

$('a:not(.download a,.demo a)')

このように変更しました、ダウンロード用のaタグ、デモ用のaタグはnotで対象外にしました
これでnotで指定したタグ以外のaだけが対象になります

 

他にtarget属性を持っているものは除外する場合

$('a:not(a[target])')

 

target属性で_blankなものは除外する

$('a:not(a[target=_blank])')

 

こんな風に除外したいのもをnotで外しておけば細かく制御できます

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)