jQuery .slideUp, выполняющийся до .animate

Question

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

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

Левая панель с надписью «services» использует .slideUp. Правая панель, помеченная как элемент nav nav, была выбрана и использует .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'); 
      } 
     } 
    }); 

}); 

Answer 1

Эта проблема возникает потому, что каждый раз при нажатии на кнопке делает DIV анимировать высоту до 240 пикселей. Только после завершения этой анимации собирается начать анимацию 0.

Есть два решения: 1. Вы можете проверить, если панель закрыта, и только затем анимировать 2. Force анимации, чтобы остановить прежде, чем анимировать до 0

Пример решения ОС 2:

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