ページ全体、もしくは部分的にフェードイン、フェードアウトさせたい場所を各々classで指定します。
例）.box1のフェードアウトを追いかけるように、.box2を時間差でフェードアウトさせます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
jQuery( function( $ ) { var timer = 500; // アニメーションのスピード $('.box1').fadeIn( timer ); $("a[target!='_blank']").click( function() { var url = $(this).attr( 'href' ); $('.box1').animate({ 'opacity' : 0 }, timer, function() { location.href = url; }); return false; }); }); jQuery( function( $ ) { var timer = 1000; // アニメーションのスピード $('.box2').fadeIn( timer ); $("a[target!='_blank']").click( function() { var url = $(this).attr( 'href' ); $('.box2').animate({ 'opacity' : 0 }, timer, function() { location.href = url; }); return false; }); }); |
フェードインを有効にしたい場合、スタイルシートでclassを各々display:nonにします。
|
1 2 3 |
.box1, .box2 { display: none; } |
既存のトップへ戻るに反応してフェードアウトする場合は、トップへ戻るプラグインjcwp scroll to topがおすすめです。
特定のページ(カテゴリなど)のみにかけたい場合は、外部JavaScriptを読み込ませる
※スクリプトをサイト全体にかけている場合、classがないページへアクセスすると不具合が発生する現象があります。
※レスポンシブ時のメニュー開閉時も反応してしまうのが難点。
コメントを残す