jQuery slideToggle을 사용하여 애니메이션에 주저 함

Question

애니메이션이 슬라이딩 DIV의 맨 아래에 가까워서 텍스트가 포함 된 DIV에 간단한 jQuery slideToggle()을 작성하려고하는데 애니메이션이 매우 부진한 것 같습니다 (망설여 보이는 것 같습니다).

코드 및 예는 here입니다. 몇 대의 컴퓨터와 인기있는 브라우저의 모든 최신 버전에서 테스트를 마쳤습니다. 모두 같은 방식으로 작동합니다. 이상하게도, 정확히 같은 페이지를 jsFiddle에서 실행하면 부드럽습니다.

아이디어가 있으십니까? 다른 사람이 제안처럼

UPDATE이의

부분은 jQuery를 애니메이션이 실행되기 전에 슬라이딩 DIV의 높이를 알고하지 않습니다, 것 같다. 슬라이딩 DIV의 내용은 매우 짧거나 다소 길기 때문에 어느 것도 마찬가지입니다. 따라서 DIV의 높이를 jQuery로 숨기고 그에 따라 CSS 높이를 설정하기 전에 높이를 잡으려고했습니다. 다소 부드러운 애니메이션 제작하지만, 아마 최고의 솔루션 - demo

UPDATE 2

이 문제가 초기 예를 들어 여러 CSS의 문제 때문이라고 나타납니다. 첫째, DIV가 너무 많습니다. 둘째, 슬라이딩 DIV가 패딩 세트를 가지고 있습니다. 을 toggleSlide으로 잘 재생하지 못하고, 마지막으로 슬라이딩 DIV가 #control-container (버튼) DIV가 포함 된 컨테이너 DIV에 있습니다.

슬라이딩 요소와 슬라이딩 DIV 자체에 대한 외부 DIV를 2로 줄이고 외부 슬라이딩 DIV 패딩을 설정하지 않으면 트릭을 수행하는 것처럼 보였습니다 (final example).

Answer 1

뻔뻔스러운 Karmaw * * *의 내가 곧 정상 궤도에있어 단지의 경우 g) 내가 너무 내 가정을 확인할 수없는 지금 내 아이폰에있어

---

-하지만 padding 및/또는 margin 속성 및 height:auto으로 애니메이션을 적용하기 전에 유사한 단점이 발생했습니다.

jQuery는 이러한 상황에서 애니메이션을 적용하기 전에 실제 높이를 결정하는 데 어려움이있는 것 같습니다.

실제 내용을 컨테이너 div에 배치하거나 고정 높이를 지정하여 애니메이션이 원활하게 실행되는지 확인하십시오.

---

편집 1 :

내가 사용 기억 다른 해결 방법 :

• 을, CSS domready에
• 를 통해 요소를 숨길 jQuery를 통해 요소의 높이를 결정하고 그것을 할당하지 마십시오 요소를 통해 data()을 입력 한 다음 요소의 height을 0 및 overflow:hidden
• slideToggle() 대신 높이를 저장 한 animate()을 사용하십시오.

위령하지만, 트릭을 않습니다.

---

편집 2 :

관련된 문제 (그리고 해결 방법) are described here

---

편집 3 :

은 혹시, 당신을 위해 this fiddle 작동합니까 ? 패딩이 포함 된 컨테이너 추가 - 잘못된 형식을 핑계로 삼아 jsfiddle은 iPhone에서 재미를 느끼지 않습니다.

Answer 2

jQuery Easing 플러그인이 도움이 될 수 있습니다.