javascript - jQuery 具有 min-height 属性的元素的动画高度？

Question

我在 CSS 中设置了一个最小高度为 300px 的元素:

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

当我单击 #collapse 元素时，我希望 #summary 元素平滑折叠到 100 像素的高度。

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

但是，什么也没有发生，我认为这是因为 min-height 属性。

我have read this discussion on the jQuery forums ，但我仍然不知道如何使 #summary div 平滑地进行动画 - 按照他们的建议将 min-height 设置为 auto 会使 div 消失然后重新出现!有人可以帮忙吗？

更新:我已经做了a jsFiddle to demonstrate the problem 。

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 属性设置为动画之前元素本身的计算高度。