1

リンクがクリックされたときに各ページがフェードインおよびフェードアウトするように、サイトでこのフェードインおよびフェードアウト 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;
    }
});
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 に答える