リンクがクリックされたときに各ページがフェードインおよびフェードアウトするように、サイトでこのフェードインおよびフェードアウト JQuery/Javascript 効果を使用しています。クリックされたリンクが別のページにつながるときはうまく機能しますが、リンクがページの別の部分 (トップに戻るリンクなど) につながるとき、mailto リンクがクリックされたとき、および新しいページまたはタブで開くはずのリンクがクリックされた。これらのタイプのリンクをクリックすると、新しいページに移動しないため、空白のページが表示されるだけです。スクリプトは次のとおりです。
$(document).ready(function() {
//Fades body
$("body").fadeIn(1500);
//Applies to every link
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
//Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
このため、特定のリンク (トップに戻るリンクなど) からこのフェードイン/アウト機能を除外できる方法があるかどうかを調べようとしていますが、その方法がわかりません。すべてのリンクをフェードイン/フェードアウトするように設定するのではなく、フェードイン/アウト効果を特定のクラスに設定して、すべてのリンクに影響を与えないようにすることができます。ただし、サイトはかなり大きいため、そのクラスをすべてのリンクに追加するのは非常に面倒で困難です。そうするのではなく、このフェードイン/アウト機能を除外する非フェードクラスを定義する方法があるかどうか疑問に思っていますか? そうすれば、問題のあるいくつかのリンクにそのクラスを適用して、それらのリンクを正常に動作させることができます。
簡単なことのように思えますが、私はまだ javascript/jquery に精通していないため、その方法がわかりません。どんな助けでも大歓迎です!
*編集: 他の誰かが同様の問題を抱えている場合の解決策を次に示します。不足しているピースを提供してくれた David に感謝します。
$(document).ready(function() {
//Fades body
$("body").fadeIn(1500);
//Applies to every link EXCEPT .no-fade class
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
//Redirects page
function redirectPage() {
window.location = linkLocation;
}
});