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

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