jQuery를 사용하여 요소의 높이를 자연스러운 크기로 어떻게 애니메이션화할 수 있나요?

jQuery로 애니메이션 가능한 자동 높이 요소

요소를 자연스러운 높이로 확장하는 것은 애니메이션으로 달성하기 까다로운 작업일 수 있습니다. 제공된 예에서 볼 수 있듯이 단순히 높이를 "자동"으로 설정하면 애니메이션이 실행되지 않을 수 있습니다.

이를 극복하려면 다단계 접근 방식이 필요합니다.

1. 현재를 보존하세요 높이:

   var curHeight = $('#first').height();

2. 높이를 임시로 자동으로 설정:

   $('#first').css('height', 'auto');

3. 자동 계산 높이:

   var autoHeight = $('#first').height();

4. 이전 높이를 복원하고 애니메이션화:

   $('#first').height(curHeight).animate({height: autoHeight}, 1000);

5. 연결하다 단계:

   var el = $('#first'),
       curHeight = el.height(),
       autoHeight = el.css('height', 'auto').height();
   el.height(curHeight).animate({height: autoHeight}, 1000);

이러한 단계를 따르면 요소를 자연스러운 높이로 부드럽게 애니메이션화할 수 있습니다.

위 내용은 jQuery를 사용하여 요소의 높이를 자연스러운 크기로 어떻게 애니메이션화할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!