애니메이션 위치 지정 문제를 사용하여 Jquery 슬라이딩 패널

Question

3 개의 목록 항목으로 구성된 탐색 패널을 만들려고합니다. 목록 항목을 클릭하면 해당 링크 집합 (subnav)이 슬라이드되어 자체를 표시합니다.

내가 여기 근무 데모가 :이 데모에서 http://jsfiddle.net/M8fS3/2/

, 기술이 작동을하지만, 약간의 버그입니다. 닫기 버튼과 (+) 버튼은 링크를 클릭할수록 자리를 잃는 것처럼 보입니다. 그들은 자신의 상대적인 위치를 잃어버린 것처럼 보이며, 절대적으로 배치 된 것처럼 행동합니다. 부모와 관계없이 컨테이너와 관련됩니다.

저는 다른 방법으로이 글을 쓰고 싶습니다. 동료 개발자에게이 같은 작업을 수행하는 데 더 좋은 기술이 있는지 확인하고 싶습니다. 나는 애니메이션이 서로 동기화 될 싶기 때문에

$("#serviceBox li a").on("click", function(){ 
     $(this).animate({ 
      'left' : -250 
     }, {duration: 200, queue: false, easing: 'linear'}); 

     $(this).next(".panel").animate({ 
      'left' : 0 
     }, {duration: 200, queue: false, easing: 'linear'}); 
    }); 

    $("a.closePanel").on("click", function(){ 
     $(this).parent().animate({ 
      'left' : 250 
     }, {duration: 200, queue: false, easing: 'linear'}); 

     $(this).parent().prev("a").animate({ 
      'left' : 0 
     }, {duration: 200, queue: false, easing: 'linear'}); 
    }); 

내가 false로 큐를 설정하고 다음과 같이 현재 내 JQuery와입니다. 여기에 HTML과 CSS를보고 싶다면 (현재는 바이올린에 있습니다) 알려주십시오. 미리 감사드립니다.

Answer 1

닫기 버튼과 열린 버튼이 위치를 잃어 버리는 이유는 상위 컨테이너의 상대 값을 상속했기 때문입니다. 간단히 position:relative에 #serviceBox li .panel a.closePanel을 추가하면됩니다.