2011-11-30 1 views
2

나는 간단한 accordeon을 만든다 (이것 같이)
| 열린 ||
jquery와 나는 클릭 한 슬라이드를 펼치고 다른 것을 접을 필요가 있습니다.
모든 슬라이드의 너비가 동일합니다.

그것은 같은 이것을 만들기 위해 좋은 ...
jquery에서 동기화 rezise 애니메이션을위한 메서드가 내장되어 있습니까?

$(this) 
.next().animate({width: 160}, 500, "easeOutQuad") 
.siblings("dd").animate({width: 0}, 500, "easeOutQuad"); 

하지만 크기 조정은 동기화되지 않습니다 렸기 때문에 내가, 애니메이션 중 마지막 슬라이드 버튼의 픽셀을 떨고있다.
UPD
우리가 바닥
반올림 우리가 두 개의 번호가 일부 프레임에 두 개의 애니메이션을 시작하고 잃을 이어질 때 함수는 부동 소수점 숫자를 현재의 폭을 계산하고 라운드 정수
실제로 모든 프레임에 (하나의 픽셀)
"step"함수를 사용하여 각
프레임에서 슬라이드를 접을 때 width = (width-this.width)를 설정할 수 있지만 가장 간단한 해결책이 있다는 것을 알고 있습니다. 감사합니다. .

슬로우 모션 예
http://jsfiddle.net/7tSMh/2/
녹색 RECT 클릭하고 마지막으로, 블루 RECT을주의 깊게보십시오. 문제가 없다면 n 번해라.

UPD
크롬은

+0

유효한 답변이 아니기 때문에 이것을 대답 대신 주석으로 표시하겠습니다. 답변으로 생각하면 알려주고 아프게 게시하십시오. 하지만이 링크를 확인하십시오. http://jqueryui.com/demos/accordion/#default 소스 코드 등을보실 수 있습니다. –

+0

Teun Pronk을 붙여 넣기 만하면됩니다.이 액자를 클릭하고 마지막 항목을 살펴보십시오. 내가 무슨 뜻인지 안 보여? – Shara

+0

다소 차이가 있습니다. 데모 있어요? 온라인 또는 오프라인일까요? 지역의 경우 jsfiddle에 올려 놓으십시오. 제게는 문제가 무엇인지 명확히 말해주십시오. 어쩌면 그것의 다만 저 그러나 나는 진짜로 문제를 구상한다. –

답변

0

사용자 지정 애니메이션을 구현 고려 파이어 폭스
아무런 문제가 없습니다. jQuery .animate() docs에서 "단계 기능"섹션을 살펴보십시오. 한 번에 모든 요소를 ​​포함하도록 선택기를 작성하고 현재 호출 된 요소를 감지하는 사용자 지정 함수를 사용할 수 있습니다.

적어도 두 개의 다른 요소 집합에 대해 .animate()을 호출하여보고있는 인터리브 애니메이션 문제를 대부분 해결해야합니다.

관련 문제