1

I'm using this fade in and out JQuery/Javascript effect on my site to have each page fade in and out when a link is clicked. It's working great when the link that is clicked leads to a different page, but it is causing problems when the link leads to a different part of the page (such as my back to top link), when a mailto link is clicked, and when a link that is suppose to open up in a new page or tab is clicked. When these type of links are clicked they just lead to a blank white page because they don't lead to a new page. Here is the script:

$(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;
    }
});

Because of this I'm trying to figure out if there is a way where I can exclude this fade in/out function from certain links (such as the back to top link), but I don't know how to do it. I know that rather than set all the links to fade in/out I can set the fade in/out effect to a specific class that way it doesn't effect every link. However because the site is rather large, it would be extremely tedious and difficult to add that class to every link. So rather than do that I'm wondering if theres a way to define a no-fade class that would exclude this fade in/out function? That way I could apply that class to these few links that are having problems and make those links behave normally.

It seems like a simple thing to do, but because I'm still not very fluent in javascript/jquery I don't know how to do it. Any help would be much appreciated!

*EDIT: Here is the solution incase anybody else has a similar issue. Thanks to David for the missing piece!

$(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;
    }
});
4

2 回答 2

1

是的，您确实可以定义一个类，该类在应用于锚点时会将其排除在执行淡出和重定向之外。

因此，如果您有一个锚点，您希望应用默认的淡出行为，那么只需将其保持原样。如果您不想要这种行为，那么您可以应用一个类（我们称之为 *no-fade"）到锚点。

HTML

<a href="http://mysite.com/anotherPage">Another page</a>
<a href="http://mysite.com#backToTop" class="no-fade">Back to top</a>

jQuery

<script type="text/javascript>

    $(document).ready(function() {

        $("body").fadeIn(1500);

        $("a").not(".no-fade").click(function(event){
            event.preventDefault();
            linkLocation = this.href;
            $("body").fadeOut(1000, redirectPage);      
        });

        // Redirects page
        function redirectPage() {
            window.location = linkLocation;
        }
    });

</script>

我从您的代码中编辑的唯一内容是选择了我更改的锚点：

$("a")

至

$("a").not(".no-fade")
于 2013-04-20T01:49:39.833 回答
0

不显眼的方法是查找井号 ( #) 或mailto:等，以防止这些类型的链接淡出：

工作小提琴

$("a").click(function (event) {
    event.preventDefault();
    linkLocation = $(this).attr('href');
    if(linkLocation.indexOf('#') != -1 || linkLocation.indexOf('mailto:') != -1)
    {redirectPage();}
    else if($(this).attr('target') && $(this).attr('target').indexOf('_') != -1) window.open(linkLocation);
    else $("body").fadeOut(1000, redirectPage);
});

还有，linkLocation = this.href应该linkLocation = $(this).attr('href')

于 2013-04-20T01:49:23.747 回答