매초마다 메뉴가 다른 애니메이션을 전환합니까?

Question

이 나는 ​​빵 부스러기가 떨어져 오른쪽으로 전환, 바이올린

http://jsfiddle.net/d9wf1s44/

나는 햄버거 메뉴를 클릭

를 생성하고, 그 후 기능 메뉴를 표시하는 실행했습니다.

 $menu_toggle.on('click', function(e){ 
      e.preventDefault(); 
      $(this).toggleClass('open'); 
      breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){ 
       $navigation.fadeToggle(600); 
      }); 
     }); 

이제 문제는 내가 다시 클릭하면, 당연히 같은 일이, 이동 경로가 전환됩니다 일어날 메뉴가 사라질 것입니다. 그냥 먼저 메뉴가 페이드 아웃되고 토글 인 메뉴가 필요하다는 것입니다. 어떻게 할 수 있습니까? animate은 CSS 조작에 사용되며 CSS 전환 및 지연을 사용하여 모든 작업을 시도했지만 여기서는 멋진 결과를 얻을 수 없었습니다. 빵 부스러기에있는 토글 애니메이션이 마음에 들었습니다. 그래서 토글 (breadcrumbs)도 사용하고 있습니다. 표시가 없으므로 메뉴가 아이콘 옆에 있습니다).

두 번째 클릭시 발생하는 문제를 어떻게 제어 할 수 있습니까? 이것을 어떻게 분리합니까?

Answer 1

당신은, 당신은 다음과 같이해야 할 당신이 클래스는 "열기"를 전환 한 후 가까운 메뉴

의 대체 애니메이션을해야 내 jsfiddle 데모

if($(this).hasClass('open')){ //open function 
    breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){ 
     $navigation.fadeIn(600); 
    }); 
}else{ 
    $navigation.fadeOut(600, function(){ 
     breadcrumbs_bar.toggle('slide', {direction:'right'}, 800) 
    }); 
} 

확인할 수 http://jsfiddle.net/euds0n6x/