如何使用 jQuery 將元素的高度設定為「自動」？

使用jQuery 將元素動畫設定為自動高度

使用響應式佈局時，可能需要對元素的高度進行動畫處理以自動調整其高度大小依內容。但是，直接將 height 屬性設為「auto」動畫可能不會產生所需的效果。

以下是一個嘗試對

進行動畫處理的範例程式碼。從 200px 到自動高度：

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

不幸的是，此程式碼不會將元素的高度動畫設為自動。相反，它只會將元素折疊到高度 0。

要實現所需的行為，請按照以下步驟操作：

1. 儲存目前高度： 儲存元素目前高度，取得auto後恢復

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

2. 暫時將高度切換為自動：暫時將元素的高度設定為「自動」以計算所需的高度。

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

3. 取得自動高度：取得將元素的高度設定為「自動」後的高度。

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

4. 切換回並動畫到自動高度：將元素的高度恢復為其原始值，然後將其設置為汽車動畫h eight.

   $('#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 將元素的高度設定為「自動」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！