jQuery .slideUp выполняется перед .animate

Я новичок в jQuery, это будет один из моих первых проектов, использующих его. У меня большая часть завершена и работает так, как мне нужно.

Единственная проблема, с которой я сталкиваюсь, заключается в том, что при щелчке элемента навигации в активном состоянии две боковые панели не возвращаются к исходному состоянию одновременно.

Левая панель с надписью «услуги» использует .slideUp. Правая панель помечена, какой элемент навигации был выбран и использует .animate.

Я хотел бы, чтобы оба скользили вверх одновременно, кто-нибудь знает какие-нибудь методы, которые я мог бы использовать для этого?

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

});