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动画