How to execute .click() after jQuery animation completes?

I want to slideUp one div after clicking a link, then slideDown another div, then go to the next page.

Problem: new page loads before the animations are finished.

Question: How can I do this?

Should I use preventDefaul开发者_开发知识库t and then some way to resume it?

This is the URL: http://www.jolandaschouten.nl/wordpress

This is the code, which is now only implemented for the first menu item:

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: I don't want to use AJAX, because of SEO and browser navigation problems. The click should really result in going to the next page.

Return false to prevent the default action (following the link), use closures to latch onto the item that was clicked, and then manually follow it:

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

(The first callback doesn't actually have to be an inline function literal like that, but the others do in order to close around the clickedAnchor value.)

one thing you could do is wrap your whole animation process in .animate() and then use the callback to direct to the new page. The callback under .animate() happens when the animation is complete. This should give you the behavior you are looking for.

Check the inline comments. Simplified the initial selection. To load the new page use the slideDown callback.

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

Thanks so much all of you, for the help!

It took me a while to get the code right (sort of...), because there's not much to slide down when the new page hasn't loaded yet, so I couldn't use the slideDown callback.

I now have a temporary solution which is: I use if statements to determine on which page I am, and then do the second half of the animation, the slideDown-part. For the first part of the animation, the slideUp-part, I have the 'location.href' as a callback, with 'return false' as Phrogz demonstrated.

Like this:

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

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

And then, after the page reloads (and some more if statements follow this, one for each page):

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

Now I'm stuck because I have to figure out a way to implement a difference between going from one page to another, and going from one sub-page to another sub-page, and from page to sub-page, etc. But that will be another thread.