jquery - jQuery .slideUp executing before .animate

Question

I'm rather new to jQuery, this would be one of my first projects using it. I have the bulk of it completed and working how I need it.

The one problem I am having is that when a navigation item is clicked when in the active state, the two side by side panels do not animate back up to the original state at the same time.

The left panel labeled 'services' is using .slideUp. The right panel labelled which ever nav item has been chosen and is using .animate.

I would like both to slide back up at the same time, anyone know any methods I could use to do this?

JSFIDDLE

$(document).ready(function() {

$('nav a').bind('click', function() {

    var page = $(this).attr('rel');
    var pageElement = $('#' + page);

        // slide down services box
        $("#slide-down").animate({
            "height": "240px"
        });

            // create div for service content
            $("#pages-wrap").slideDown();

    if($(pageElement).hasClass('open')) {

        // This page is already open, so just close it
            $('#pages div.open').slideUp().removeClass(); 
            $("#pages-wrap").slideUp();
            $('#slide-down').animate({"height": "100px"});

        } else {
            // This page is not open
            if($('#pages div.open').length > 0) {
                // There are other pages open, close them then open new one
                $('#pages div.open').removeClass('open').fadeOut(function() {
                $('#pages div#' + page).fadeIn().addClass('open');
                });

            } else {
                // No other pages open, just open this one
                $('#pages div#' + page).slideDown().addClass('open');
            }
        }
   });

});

Answer 1

This problem occurs because each time you click on the button is making the div to animate the height up to 240px. Only after finishing this animation is going to start animating to 0.

There are two solutions: 1. You can check if the panel is closed, and only then animate 2. Force the animation to stop before animate to 0

Example os solution 2:

$('#slide-down').stop().animate({"height": "100px"});