jQueryで要素の高さを「自動」にアニメーション化するにはどうすればよいですか?

jQuery を使用して要素をアニメーション化して高さを自動調整する

レスポンシブ レイアウトを使用する場合、要素の高さをアニメーション化して自動的に調整する必要がある場合があります。コンテンツに基づくサイズ。ただし、高さプロパティを「auto」に直接アニメーション化すると、期待する効果が得られない可能性があります。

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

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

をアニメーション化するコード例を次に示します。 from 200px to auto height:
残念ながら、このコードでは要素の高さを自動にアニメーション化することはできません。代わりに、単純に要素を高さ 0 に折りたたみます。
目的の動作を実現するには、次の手順に従います。
$('#first').css('height', 'auto');
現在の高さを保存します。 要素の現在の高さを保存して、自動取得後に復元します。 height.
var autoHeight = $('#first').height();
高さを一時的に自動に切り替えます: 必要な高さを計算するには、要素の高さを一時的に「自動」に設定します。
$('#first').height(curHeight).animate({height: autoHeight}, 1000);
オートを入手height:
var el = $('#first'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);
「自動」に設定した後に要素の高さを取得します。切り替えて自動高さに切り替えてアニメーション化します: 要素の高さを復元します元の値に戻してから、自動にアニメーション化します。 height.これらの手順を組み合わせると、要素を自動高さにアニメーション化する次のコードに到達します。

以上がjQueryで要素の高さを「自動」にアニメーション化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。