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

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

Answer 2

您需要在css中使用height代替min-height，因为在click事件中将高度降低到100并且最小高度为300。

<强> Live Demo

更改

#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

由于300px，您的元素仅限于min-height，因此您必须为min-height设置动画，而不是height

jQuery使用min-height属性在元素上设置动画高度？

3 个答案: