Jquery - 애니메이션 높이 변경

Question

내용에 따라 iframe의 높이를 변경하는 스크립트가 있습니다. 스크립트 자체는 훌륭하게 작동합니다. iframe이 200px에서 1000px로 바뀌면 높이 변화를 애니메이션화하는 방법이 있는지 궁금합니다. 이것은 지금까지 내 코드입니다, 잘 작동, 그냥 그것에 애니메이션을 추가해야합니다. 도와 주셔서 감사합니다.

Answer 1

"setInterval"은 항상 무언가를 검사하기 때문에 좀 더 무겁습니다.

CSS로 시도하셨습니까? ... .flexht 클래스로 전환하면 어떻게됩니까?

.flexht{ 
    -moz-transition:all 1s; 
    -webkit-transition:all 1s; 
    transition:all 1s; 
} 

죄송합니다. 귀하의 HTML이 어떻게 보이는지 모르겠습니다. 하지만 제 경험상이 방법이 효과가 있습니다.

Answer 2

이 예는 바로 그것이 있어야 값을 애니메이션 함수를 전달

$("#book").animate({ 
    opacity: 0.25, 
    left: "+=50", 
    height: "toggle" 
}, 5000, function() { 
    // Animation complete. 
}); 

http://api.jquery.com/animate/ 기본적 대신 높이 설정에서 촬영된다. animate 함수는 시간이 지남에 따라 값을 변경하기 위해 requestAnimationFrame 함수를 내부적으로 호출합니다. https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

주어진 두 번째 매개 변수 (5000)는 밀리 초 단위로 애니메이션을 적용하는 시간입니다. 그래서 5000 초 동안 지속됩니다. 이 매개 변수는 선택적입니다.

애니메이션 기능에 여유 문자열을 지정하여 다르게 애니메이션을 적용하도록 지정할 수 있습니다. 모든 easings가 jQuery에서 지원되지는 않지만 여기에 나열된 몇 가지 시도를 시도해 볼 수 있습니다. http://api.jqueryui.com/easings/

마지막으로 빈 함수는 애니메이션이 끝날 때 호출됩니다. 이 매개 변수는 선택적입니다.