Can I have jQuery load a page after finishing a slide toggle?

I have a button linking to a separate page, which is inside of a panel that uses jQuery to slide open and closed. On clicking the button, I want the panel to slide closed, then have the linked page load in the开发者_JAVA技巧 main window.

Here's the code:

$("a.appLink").click(function(){
    closePanel();
});

var closePanel = function(){
    if ($(".panel").is(":visible")) {
        $(".panel").slideToggle("medium",plusMinus)
    }}

The "plusMinus" callback is just another function that toggles a little image to indicate whether the panel can be expanded or not.

The problem is that when I click on the link, the new page loading will interrupt the panel closing animation, only allowing it to partly close before the page reloads. Is there a way to have the linked page load as a callback function after "closePanel" instead of just a regular HTML link, so the panel can have an opportunity to close completely?

Thanks a lot for any help.

---

You'll need to cancel the click, and then change the location directly in the callback on slideToggle. Something like:

$("a.appLink").click(function(){
    closePanel(this.href); // <== Pass the `href` of the link
    return false;          // <== Cancel the click
});

var closePanel = function(href){
    if ($(".panel").is(":visible")) {
        $(".panel").slideToggle("medium",function() {
            plusMinus();
            location = href; // <== Navigate to the link
        });
    }
    else {
        location = href;     // <== If it makes sense to do the navigation anyway
    }
};
...

Somewhat off-topic, but: Note that by doing this, you'll be breaking Shift+Click, Ctrl+Click, etc., because you'll be cancelling the action they activate, and replacing it with your own action instead. You have to ask yourself whether the user experience you provide is appropriate and worth doing that.

---

You could use event.preventDefault() and redirect the user later on inside slideToggle's callback.

$("a.appLink").click(function(event){
    // Cancel the default behavior of the link:
    event.preventDefault();
    var link = this;
    closePanel(function() {
        plusMinus();
        window.location.href = link.href;
    });
});

var closePanel = function(callback){
    if ($(".panel").is(":visible")) {
        $(".panel").slideToggle("medium", callback)
    }
}

This should direct the user to the new page after plusMinus has completed.

Here's a working example: http://jsfiddle.net/andrewwhitaker/QDYvx/