代码之家 › 专栏 › 技术社区 › juroto

如何排除某些链接上的JQuery/Javascript淡入淡出功能?

fadeout fadein jquery javascript

juroto · 技术社区 · 11 年前

我在我的网站上使用这种淡入淡出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还不是很流利,我不知道怎么做。如果有任何帮助,我将不胜感激!

*编辑:这是解决方案,以防其他人有类似的问题。感谢大卫给了我丢失的那一块!

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

2 回复 | 直到 9 年前

David Spence 11 年前

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

因此,如果你有一个锚,你希望你的默认淡出行为适用于它,那么就让它保持原样。如果你不想要这种行为,那么你可以将一个类(我们称之为“无淡出”)应用于锚。

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")

Alex W 11 年前

这个 不引人注目的方式 将查找哈希符号( # )或 mailto: 等,以防止这些类型的链接逐渐消失:

working fiddle

$("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')