ホームページ >ウェブフロントエンド >CSSチュートリアル >jQueryを使用してDiv要素をアニメーション化して高さを自動調整する方法?

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-07 06:25:19975ブラウズ

How to Animate a Div Element to Auto Height Using jQuery?

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

をアニメーション化しようとすると、要素を特定の高さから自動高さに変更すると、問題が発生する可能性があります。これに対処するには、次の解決策を検討してください。

  1. 現在の高さを保存します。
    の高さを決定します。サイズ変更前。
    var curHeight = $('#first').height();
    1. 自動高さへの移行: 高さプロパティを一時的に 'auto' で上書きします。
    $('#first').css('height', 'auto');
    1. 自動高さを取得します:
      の自然な高さを取得します。自動高さを使用します。
      var autoHeight = $('#first').height();
      1. 元に戻してアニメーション化します: 初期の高さを復元し、自動高さにアニメーションを開始します。
      $('#first').height(curHeight).animate({height: autoHeight}, 1000);
      1. コードを連結します:すべての手順を組み合わせて、簡単な解決策を作成します。
      var el = $('#first'),
          curHeight = el.height(),
          autoHeight = el.css('height', 'auto').height();
      el.height(curHeight).animate({height: autoHeight}, 1000);

以上がjQueryを使用してDiv要素をアニメーション化して高さを自動調整する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。