jQuery를 사용하여 Div의 높이를 '자동'으로 애니메이션화하는 방법은 무엇입니까?

jQuery를 사용하여 요소를 자동 높이로 애니메이션화

div에 애니메이션을 적용하여 콘텐츠에 따라 높이를 자동으로 조정하려고 합니다. 기본 코드는 간단하지만 예상대로 작동하지 않을 수 있습니다. 아래에서 솔루션을 자세히 살펴보고 단계별 설명을 제공하겠습니다.

코드 스니펫

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});

솔루션

제공된 코드는 div의 높이를 '자동'으로 애니메이션화하여 높이에 따라 확장되도록 합니다. 콘텐츠. 하지만 div의 초기 높이가 200px로 설정되어 있으므로 작동하지 않습니다. '자동' 높이가 200px부터 애니메이션화되면 눈에 띄는 변화가 없습니다.

단계

원하는 효과를 얻으려면 먼저 현재 높이( 200px) 실제 자동 높이를 계산하려면 높이를 임시로 'auto'로 설정하세요. 방법은 다음과 같습니다.

1. 현재 높이 저장:

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

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

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

3. 자동 높이 가져오기:

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

4. 현재 높이로 되돌리고 애니메이션:

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

결합 코드:

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

위 내용은 jQuery를 사용하여 Div의 높이를 '자동'으로 애니메이션화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!