jquery wait for .animate then go to anchor location

Question

I'm using jquery animate to slide a div off the page, this works fine but i would like to change the animate to:

1. only happen once(because if somebody double clicks it, the div comes back), and
2. wait for animation to finish before the href is followed.

This is the code that performs the div slide:

$(".choose").click(function(event) {
    var $contentDiv = $("#content");

    $contentDiv.stop().animate({
        marginLeft: parseInt($contentDiv.css('marginLeft'),10) == 0 ?
        $contentDiv.outerWidth() : 0
    });
});

Answer 1

You can call event.preventDefault() to prevent the default click action, and then do a manual redirect by setting location.href after the animation using a callback...

$(".choose").click(function(event) {
    var $contentDiv = $("#content");
    var redir = $(this).attr("href");

    $contentDiv.stop().animate({
        marginLeft: parseInt($contentDiv.css('marginLeft'),10) == 0 ?
        $contentDiv.outerWidth() : 0
    }, function() { location.href = redir; });

    event.preventDefault();
});