jQuery .slideUp executing before .animate -

i'm rather new jquery, 1 of first projects using it. have bulk of completed , working how need it.

the 1 problem having when navigation item clicked when in active state, 2 side side panels not animate original state @ same time.

the left panel labeled 'services' using .slideup. right panel labelled ever nav item has been chosen , using .animate.

i both slide @ same time, know methods use 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 service content             $("#pages-wrap").slidedown();      if($(pageelement).hasclass('open')) {          // page open, close             $('#pages div.open').slideup().removeclass();              $("#pages-wrap").slideup();             $('#slide-down').animate({"height": "100px"});          } else {             // page not open             if($('#pages div.open').length > 0) {                 // there other pages open, close them open new 1                 $('#pages div.open').removeclass('open').fadeout(function() {                 $('#pages div#' + page).fadein().addclass('open');                 });              } else {                 // no other pages open, open 1                 $('#pages div#' + page).slidedown().addclass('open');             }         }    });  }); 

this problem occurs because each time click on button making div animate height 240px. after finishing animation going start animating 0.

there 2 solutions: 1. can check if panel closed, , animate 2. force animation stop before animate 0

example os solution 2:

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