완료 전 실행중인 JQuery .animate() 완료 함수

Question

10px 패딩이 있고 content (#inner_content) 인 컨테이너 div (#content)이 있습니다. ajax (새로운 html은 #inner_content div의 모든 것을 포함합니다)을 통해 새로운 내용을로드하고 # content's html을 새 html로 바꿉니다.

이 작업을 수행하는 동안 컨테이너 높이를 애니메이션으로 새 콘텐츠의 높이에 맞게 조정하려면 div (#content)을 입력하십시오. 그래서 오버플로를 설정했습니다 : 컨테이너 div에 대해 숨겨졌고 새로운 콘텐츠를로드 할 때 높이를 얻고 컨테이너 div에 동일한 높이로 애니메이션을 적용합니다. 모든 것이 좋은 것은 때로는 높이가 약간 더 큰 것일 수도 있습니다 ((10-20 pixels 어쩌면) 필요 이상으로 디자인에 문제가 발생합니다.

.animate()에 완전한 기능을 넣어서 애니메이션이 완료된 후 높이가 정확하도록 컨테이너 높이 div을 ''(auto)로 설정합니다. 문제는 완전한 함수가 즉시 실행되고 애니메이션이 건너 뛰고 높이가 자동으로 자동으로 변하는 것입니다. 코드는 다음과 같습니다.

$("#content").html(response); 
$("#content").animate({height: $("#inner_content").height()+"px"}, 300, function() { 
$("#content").css({height: ''}); 
}); 

이 문제를 어떻게 해결할 수 있습니까? 애니메이션을 실행 한 다음 높이를 auto로 설정해야합니다 (div가 즉시 10-20px 짧아지기 때문에 프로 세스에 작은 틈이 생깁니다.) 그러나

Answer 1

흠, 모든 소스 코드가 없어도 까다 롭습니다. 하지만 내 직감 본능 따라서 즉시뿐만 아니라 이벤트를 트리거, 어떤 이유로, 당신의 #content 및 #inner_content div가 실제로 애니메이션이 즉시 실행의 원인이되는 같은 높이 (I 0을 추측하고있어)이다, 말하고있다.

어떤 소스를 제공 할 수 있습니까?

먼저 부서에서 outerHeight() 메서드를 사용하여 재생하는 것이 좋습니다. 또한, 다음의 의사 코드 시도 대신 overflow: hidden을 해제 시도 :

현재 내용을 애니메이션 숨겨진 별도의 div

의 새로운 내용이 새로운 콘텐츠의 높이를 가져

1. 로드
2. 현재 내용을 새 내용으로 업데이트하십시오.