jQuery : 서로 부딪히지 않고 두 요소에 애니메이션을 적용하는 방법

Question

난 뒤에 "패널"이 드러나도록 "슬라이드 오버"할 100 % 너비 테이블을 얻으려고합니다. 전환이 일어날 볼 수있는 테이블 행에 http://jsfiddle.net/z93se/2/을 (jQuery를 UI를 사용하여)

클릭 :

는 여기에 내가 어디에 있어요의 예와 일어나는 "부딪 치는"와 jsFiddle입니다. 애니메이션이 진행되는 동안 테이블은 새로 확장 된 패널을 "팝"합니다. 그런 다음 애니메이션이 끝나면 속한 왼쪽으로 돌아갑니다.

두 사람을 동시에 슬라이드시키고 위치를 유지하려면 어떻게해야합니까?

PS - 최종 결과가 작동하는 한 요소에 패딩과 플로팅이있는 것은 괜찮습니다.

업데이트 : 1) 표는 애니메이션 전에 100 % 폭 할 필요가 : 나는이

다른 두 요구 사항. 2) "미끄러지는"패널은 고정 너비가되어야합니다.

업데이트 2 :

새로운 jsFiddle (그래서 함께 플레이하는 것이 더 쉽습니다) 테두리를 사용하여 테이블의 폭을 보여줍니다. http://jsfiddle.net/z93se/14/

두 번째 문제가 발생합니다. 내가 기대했던 것처럼 행동을 시작하려면 행을 두 번 클릭해야합니다. 기본 상태는 테이블이 펼쳐져 있고 패널이 숨겨져있는 상태입니다. 행을 두 번 클릭하면 기대했던 방식에 가깝게 작동하기 시작합니다 (원래 질문에 여전히 문제가 있음). 이것에 대한 도움은 또한 평가 될 것입니다.

Answer 1

마지막으로 작동 시켰습니다. Animate() 함수를 사용하고 완료되면 div를 숨기기 위해 콜백을 전달해야했습니다.

이 jsFiddle를 참조하십시오 http://jsfiddle.net/744BL/

주 : 선택기는 클래스에 이상 스위칭하지 않았다 몇 가지 문제를 야기으로 ID를 사용.

Answer 2

이 CSS는,

HTML을 할 것이라고 나는 이것이 당신이 원하는 무엇을 희망

CSS를

#task-list table { 
    width: 75%; 
} 
.details-active { 
    padding-right: 0px; 
} 
#task-details-container { 
    width: 25%; 
    float: right; 
} 
#task-details { 
    width: 100%; 
    padding: 0; 
    display:none; 
} 

을-작업 상세 이드 작업 - 세부 컨테이너와 컨테이너를 추가, 참조하시기 바랍니다 CSS가 변경되었습니다

** 업데이트 됨