jQuery —如何使用height：auto為div設置動畫

Question

當用戶按下“更多”時，我的div向下擴展。 div的高度始終是自動的，並且會相應地擴展以適合內容。

我需要保持“ height：auto”，以便在調整屏幕大小時CSS保持響應，但是我希望對不斷變化的高度進行動畫處理...我該怎么做？

換句話說，當用戶按下更多鍵並將其他內容添加到此div時，我希望對div的展開進行動畫處理，而不指定5em之類的特定高度。

<div id="expand">
    <p>This is the div I want to expand</p>
    <div id="hidden" style="display:none">
       <img />
       <img />
    </div>
</div>

得到它了！ 我需要在而不是謝謝上使用slideToggle方法！

Answer 1

jsBin演示 <-調整窗口大小。 效果很好。

您可以像這樣簡單地進行操作：

$('.more').click(function(){
  $("+ div", this).slideToggle();
});

具有：

<button class="more">MORE</button>
<div>Lorem Ipsum...</div>

_{我會使用您擁有的HTML，但這就是您在Question中未顯示任何代碼時的價格；）}

Answer 2

我不知道您如何設置代碼，但是jQuery

$(link).on("click", function() {
   $(element).slideToggle();
});

可能為您工作。

那是您要找的東西嗎？

Answer 3

您可以隨時：

var targetDiv = $('.targetDiv');
// get original Height
var originalHeight = targetDiv.height();
// get natural height
targetDiv.css({ height: 'auto'});
var naturalHeight = targetDiv.height();
// reset div to original height
targetDiv.css({height: originalHeight});
// animate to target height
targetDiv.animate({
   height: naturalHeight}, {
   duration: 1000,
   completion: function() {
      // set height to auto
      targetDiv.css({height: 'auto'});
   });

Answer 4

您可以使用jQuery完成此操作。 您只需要計算height: auto絕對高度。

JSFiddle： http : //jsfiddle.net/CS2h9/