jQuery為具有min-height屬性的元素設置高度動畫？

Question

我在CSS中設置了一個最小高度為300px的元素：

<!-- HTML -->
<div id="summary"></div>
<div id="collapse"></div>
/* CSS */
#summary { min-height: 300px } 

當我單擊#collapse元素時，我希望#summary元素平滑地折疊到100px的高度。

$("#collapse").click(function() {
   $("#summary").animate({ height: 100}, 1000);
}); 

但是，什么也沒有發生，我認為這是由於min-height屬性。

我已經在jQuery論壇上閱讀了此討論 ，但是我仍然想不出如何使#summary div平滑地進行動畫-將最小高度設置為auto，因為它們提示div消失，然后重新出現！ 有人可以幫忙嗎？

更新：我做了一個jsFiddle來演示問題 。

Answer 1

你可以嘗試做類似的事情

$("#collapse").click(function() {
   var summary = $("#summary"),
       height  = summary.height();

   summary
     .css({ height: height + 'px', minHeight: 0 }) 
     .animate({ height: 100}, 1000);
});

這個想法是重置min-height並將css height屬性設置為動畫之前元素本身的計算高度。

Answer 2

您需要在css中使用height而不是min-height因為將click事件的高度降低到100且min-height是300。

現場演示

更改

#summary { min-height: 300px } 

至

#summary { height: 300px; } 

如果需要使用最小寬度，則需要更改動畫中的最小寬度而不是高度。

Answer 3

在小提琴中嘗試一下： http : //jsfiddle.net/8jn7v/5/

改變這個：

height: 50

對此：

$('#summary').animate({ 
  'min-height': 50+'px' // <--see the quotes at min-height and add pixels to it
}, 1000);

min-height可以使您減小的高度不小於min-height

由於min-height ，您的元素限制為300px ，因此您必須設置min-height而不是height動畫