ページ移動の時に、フェードイン フェードアウトの処理を導入するときにやったこと
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