jQuery fade-in Seite laden

Ich versuche zu Haken einige jQuery auf meine nav -, fade in-und out-Seite wrapper, wenn jemand klickt auf ein Haupt-nav-link. Der code selbst ist in Ordnung, aber habe nur 2 Probleme:

  • Es ist ein flash im Anfang, wie es lädt alles, entfernt,
    dann verblasst es im (nicht sicher ob das CSS bezogen).
  • Die links sind kaputt. Zum Beispiel: wenn Sie auf "Kontakt" statt
    gehen www.domain.com/contact es geht
    www.domain.com/undefiend

Jede Hilfe wäre toll. Danke!!

JS

$(document).ready(function() {
    $('#page-wrap').css('display', 'none');
    $('#page-wrap').delay(500).fadeIn(1000);

    $('.menu-item').click(function(event) {
        event.preventDefault();
        newLocation = this.href;
        $('#page-wrap').fadeOut(1000, newpage);
    });

    function newpage() {
        window.location = newLocation;
    }
});

Den code für den Nav (mit wordpress)

<div id="nav_wrap">
    <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
</div>
die links funktionieren, bevor Sie diese? Es klingt wie die href-ist von Anfang an falsch, bedeutet dies nichts ändern.
Können Sie nach dem code, waren "Kontakt" ist?
ya, wenn ich entfernen Sie den Abschnitt über JS die navigation funktioniert Prima. Und wenn Sie die Maus auf die links am unteren Rand (in chrome) es sagt Ihnen, das der link richtig ist, aber beim anklicken geht es zu "undefined"
Bearbeiten Sie die original-Beitrag zu zeigen, den nav-code
Ich sah, dass, gute. Stellen-code, so können alle helfen, das nächste mal besser. Gut, du hast deine Frage beantwortet!

InformationsquelleAutor Packy | 2013-07-26

  1. 8

    HTML:

    <div id="page-wrap" style="display: none;">
    ...
</div>

    jQuery:

    $(document).ready(function() {
    $('#page-wrap').delay(500).fadeIn(1000);

    $('.menu-item').click(function(event) {
        event.preventDefault();
        var newLocation = this.href;
        $('#page-wrap').fadeOut(1000, function () {
            window.location = newLocation;
        });
    });
});
    Danke, dies war für das flimmern perfekt. Schön und einfach.
    Boa resposta +1
    Genial!
    href sollten ergriffen werden, wie: var newLocation = $(this).attr('href');
    Das wäre der jQuery-Weg. Generell werden die änderungen, die ich tun, um die OP ' s Skripte sind mindestens so denke ich, dass es möglich ist, die Lösung (also die Antwort darauf fokussiert). Darüber hinaus ist es möglicherweise nicht notwendig, um die Verwendung von jQuery in diesem Fall... hatten Sie irgendwelche Kompatibilitätsproblem mit this.href? Danke!

    InformationsquelleAutor falsarella

Schreibe einen Kommentar