javascript - 具有最小高度属性的元素的 jQuery 动画高度？

Question

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

<!-- 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 属性。

我have read this discussion on the jQuery forums ，但我仍然无法弄清楚如何使 #summary div 平滑地设置动画 - 按照他们的建议将最小高度设置为自动使 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 属性设置为动画之前元素本身的计算高度。