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

Question

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 preventDefault 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.

Making animations just before changing page without noticing the user will be very confusing for him IMHO. Anyway, you can do a `preventDefault`, retrieve the link href thanks to `.attr("href")` and do a redirection after all the animation you want. But still, pretty much not a good idea — Shikiryu, Nov 18 '10 at 14:06

score 5 · Answer 1 · answered Nov 18 '10 at 14:11

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

@Hannenmaatje You're welcome. Your thanks would be even stronger if you 'accepted' the answer (make the green check mark appear). :) — Phrogz, Nov 24 '10 at 17:51

score 1 · Answer 2 · answered Nov 18 '10 at 14:06

1

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.

answered Nov 18 '10 at 14:06

Jeremy B.

9,168
3
45
57

score 0 · Answer 3 · answered Nov 18 '10 at 14:10

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

score 0 · Answer 4 · answered Nov 24 '10 at 16:33

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.

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

4 Answers4