ホームページ >ウェブフロントエンド >CSSチュートリアル >jQueryでDivを固定高から自動高さにアニメーション化する方法は?

jQueryでDivを固定高から自動高さにアニメーション化する方法は?

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-06 14:19:12374ブラウズ

How to Animate a Div from a Fixed Height to Its Auto Height in jQuery?

jQuery で要素を自動の高さにアニメーション化する方法

をアニメーション化しようとするときjQuery を使用して固定高さを自動高さに変更すると、一部のユーザーは問題に遭遇する可能性があります。この課題に対する解決策は次のとおりです:

提供されたコード:

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

ブラウザは固定値から「自動」への高さの変化をアニメーション化しないため、問題が発生します。

目的のアニメーションを実現するには、次の手順に従います。

  1. 現在の高さ:
var curHeight = $('#first').height();
  1. 高さを一時的に「自動」に設定します:
$('#first').css('height', 'auto');
  1. オートを入手高さ:
var autoHeight = $('#first').height();
  1. 現在の高さを復元し、自動高さにアニメーション化します:
$('#first').height(curHeight).animate({height: autoHeight}, 1000);

これこのソリューションが機能するのは、最初に現在の高さを取得し、ブラウザーが次のように設定されたときに最終的な高さを決定できるためです。 「自動。」

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

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