너비를 사용할 때 jQuery 애니메이션 글리치 : "숨김"+ 너비 : "표시"

Question

나는이 문제를 지금 당분간 다루고있어 내 코드 또는 도청 된 jQuery인지 알 수 없다.

$('elementA').animate({width: "hide", opacity: 0}); 
$('elementB').animate({width: "show", opacity: 1}); 

그것은 하위 메뉴의 용도로 사용됩니다

나는 모두가 같은 B를을 축소하고 확장하는 것을 목표로하는, 왼쪽 떴다의 두 개의 서로 다른 목록 (A와 B)에 두 개의 동시 .animate()를하고있는 중이 야 부모 톱 메뉴 항목을 클릭하면 튀어 나오게되는 수평 메뉴 막대에 표시됩니다. 문제는 지정된 요소가 축소 된 후 바로 "글리치 (glitch)"한 것처럼 보이기 때문에 실제로 숨기기 전에 1 밀리미터의 전체 너비 렌더링을 만드는 것입니다. Google 크롬 및 Firefox (Safari에서도 가능)에서 문제가 확인되었습니다.

여기 jsfiddle에 샌드 박스 예를 살펴 유무 : 일부 코드가 너무 과도하게 보일 수도 http://jsfiddle.net/XehBN/
참고 만 등

문제의 계정에 여러 개의 목록 항목을 할 수 있는가? 사전들 감사드립니다

편집, 설명 :

픽셀 하드 단위 대신에 "숨기기"과 "쇼"를 사용하는 이유는, 내가 같은 요소의 전체 폭을 예견 할 수 없다는 것입니다 텍스트 길이가 다른 여러 메뉴 목록 항목이있을 수 있습니다. 글리치를 생성하는 jQuery 자동 생성 도구 인 경우 jQuery를 통해 생성 된 너비를 검색하여 변수에 저장 한 다음 나중에 다시 사용할 수 있습니까?

Answer 1

저는 자유를 도입하여 another jsfiddle example을 만들었습니다. 내가 한 것은 닫는 하위 메뉴를 1px로 애니메이션 한 다음 스타일 속성을 제거한 것입니다 (기본 스타일을 다시 상속받습니다).

단지 1px이며 페이드 효과가 완료 되었기 때문에 약간의 점프가 실제로 눈에 띄지 않습니다.

크롬에서만 테스트 했으므로 다른 브라우저에서는 성능이 좋지 않습니다.

잘하면 그게 당신에게 뭔가를 제공합니다!