Wie führt man .click() aus, nachdem die jQuery-Animation abgeschlossen ist?

Question

Ich möchte ein div nach dem Klicken auf einen Link schieben, dann slideDown ein anderes div, dann gehe zur nächsten Seite.
Problem: neue Seite wird geladen, bevor die Animationen beendet sind.
Frage: Wie kann ich das tun?
Sollte ich preventDefault verwenden und dann einen Weg, um es fortzusetzen?

Dies ist die URL: http://www.jolandaschouten.nl/wordpress

Dies ist der Code, der zum ersten Menüpunkt implementiert jetzt nur:

jQuery(document).ready(function($){ 

    var allDivs = $("#introductie").add("#agenda").add("#werk").add("#onderwijs-organisatie").add("#publicaties").add("#links").add("#contact"); 

    console.log(allDivs); 

    $("li.page-item-11 a").click(slideUp); 

    function slideUp(){ 
     allDivs.slideUp(500, slideDown);   
    } 
    function slideDown(){    
     $("#introductie").slideDown(500); 
    } 
}); 

ps: Ich will nicht AJAX verwenden, da die SEO und Browser Navigationsprobleme. Der Klick sollte wirklich zur nächsten Seite führen.

Answer 1

Eine Sache, die Sie tun können, ist Ihre gesamte Animationsprozess in .animate() zu wickeln und dann den Rückruf zu verwenden, um auf die neue Seite zu verweisen. Der Rückruf unter .animate() erfolgt, wenn die Animation abgeschlossen ist. Dies sollte Ihnen das Verhalten geben, nach dem Sie suchen.

Answer 2

Überprüfen Sie die Inline-Kommentare. Vereinfachte die anfängliche Auswahl. Um die neue Seite zu laden, verwenden Sie den Rückruf slideDown.

function slideUp(){ 
    allDivs.slideUp(500, slideDown); 
} 
function slideDown(){ 
    $("#introductie").slideDown(500, function() { 
     /* load the new page here */ 
    }); 
} 
$(function() { 
    //you can select multiple elements like this 
    var allDivs = $("#introductie, #agenda, #werk, #onderwijs-organisatie, #publicaties, #links, #contact"); 
    console.log(allDivs); 
    $("li.page-item-11 a").click(slideUp); 
}); 

Answer 3

Return false die Standardaktion (nach dem Link), Verschlüsse auf den Punkt zu verriegeln, um den Einsatz zu verhindern, die angeklickt wurde, und dann manuell folgen:

$("li.page-item-11 a").click(function(){ 
    var clickedAnchor = this; 
    allDivs.slideUp(500, function(){ 
     $("#introductie").slideDown(500,function(){ 
      location.href = clickedAnchor.href; 
     }); 
    }); 
    return false; 
}); 

(Der erste Rückruf doesn‘ t muss tatsächlich ein Inline-Funktion literal wie das sein, aber die anderen tun, um um die clickedAnchor Wert zu schließen.)

Answer 4

Vielen Dank Ihnen allen, für die Hilfe!

Es hat eine Weile gedauert, bis der Code richtig war (irgendwie ...), denn es gibt nicht viel zu rutschen, wenn die neue Seite noch nicht geladen ist, daher konnte ich den slideDown-Callback nicht verwenden.

Ich habe jetzt eine temporäre Lösung, die lautet: Ich verwende if-Anweisungen, um festzustellen, auf welcher Seite ich bin, und dann tun Sie die zweite Hälfte der Animation, der SlideDown-Teil. Für den ersten Teil der Animation, den slideUp-Teil, habe ich den 'location.href' als Callback mit 'return false', wie Phrogz gezeigt hat.

So:

menuLinks.click(function() 
{ 
var clickedAnchor = this; 

      allDivs.slideUp(750); 
      mainDiv.fadeOut(500, function() 
      { 
       location.href = clickedAnchor.href; 
      }); 
return false;  
}); 

Und dann, nachdem die Seite neu geladen (und einige mehr, wenn Aussagen dieser folgen, eine für jede Seite):

if (currentLocation.substr(0,52) == introductiePage) 
    {  
     introductieMenu.css({color:"#FF844A"}); 
     introductieDiv.hide(); 
     mainDiv.hide(function() 
     { 
      mainDiv.fadeIn(750);   
      introductieDiv.slideDown(750); 
     });   
    } 

Jetzt stecken Ich bin, weil ich Ich muss herausfinden, wie man den Unterschied zwischen dem Übergang von einer Seite zur anderen und dem Übergang von einer Unterseite zu einer anderen Unterseite und von einer Seite zu einer Unterseite usw. realisieren kann. Aber das wird ein anderer Thread sein.