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

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

div をアニメーション化して、コンテンツに基づいて高さを自動的に調整したいと考えています。基本的なコードは単純ですが、期待どおりに動作しない可能性があります。以下にソリューションを詳しく説明し、段階的に説明します。

コード スニペット

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

ソリューション

提供されたコードは、div の高さを「自動」にアニメーション化して、展開できるようにしようとします。その内容に基づいて。ただし、div の初期の高さが 200px に設定されているため、機能しません。 「自動」高さが 200 ピクセルからアニメーション化される場合、目に見える変化はありません。

ステップ

目的の効果を実現するには、まず現在の高さを保存する必要があります ( 200px) にし、実際の自動高さを計算するために一時的に高さを「自動」に設定します。方法は次のとおりです:

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 中国語 Web サイトの他の関連記事を参照してください。