基本上,我编写了一些自定义 JS 来在页面之间进行淡入/淡出。该脚本本身运行良好,因此当我单击任何新链接时,内容会淡出并随着新页面淡入。我遇到的问题是,当我单击“mailto:someone@gmail.com”之类的链接时,它会加载电子邮件程序,但该网站仍然会淡出,内容不会淡入。我想要的是使某些链接成为我可以添加到 JS 的类,因此当单击它们时,我的淡入淡出 JS 不会加载,链接将在没有 JS 的情况下正常工作。我想我可以把它包装在一个 if/else 语句中,比如:
if (.thisclass).clicked
{not load the below JS}
else
{ here is my original JS}
这是我的代码:
// Menu Animation
$(function() {
$("#menu").css("display", "none");
$("#menu").fadeIn(500);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#menu").delay(400).fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
$(function (){
$("#menu").addClass("visible");
// mainFade Animation
});
$(function() {
$("#mainFade").css("display", "none");
$("#mainFade").delay(400).fadeIn(500);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#mainFade").fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
$(function (){
$("#mainFade").addClass("visible");
});
// Slogan Animation
$(function() {
$("#line1").css("display", "none");
$("#line1").delay(800).fadeIn(500);
});
$(function() {
$("#line2").css("display", "none");
$("#line2").delay(1400).fadeIn(500);
});
$(function() {
$("#line3").css("display", "none");
$("#line3").delay(1600).fadeIn(500);
});
$(function() {
$("#demo").css("display", "none");
$("#demo").delay(2100).fadeIn(500);
});
这是该站点的链接以供参考。联系页面有一些 Mailto 链接。