Question

Basically I wrote some custom JS to do a fade-in/fade-out between pages. The script itself works great so that when I click on any new link the content fades out and fades in with the new page. What I am haveing trouble with though is when I click on a link like “mailto:[e-mail]” it will load up the email program but the site fades out still with no fade in of content. What I would like is to make certain links a class that I can add to the JS so when they are clicked my fade JS wont load, the link will just work as is with no JS. I thought I could wrap it in an if/else statement like:

if (.thisclass).clicked
 {not load the below JS}
else
 { here is my original JS}

Here is my code as is:

     //  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);


});

Here is a link to the site to for reference. The contact page has some Mailto links.

The Site

Answer 1

You can change both of your $("a").click(function(event){ functions to $("a").not('.email-class').click(function(event){. This will fire the animation on any link that doesn’t have the email-class class.