2

我在 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 论坛上阅读了这个讨论，但我仍然无法弄清楚如何使#summarydiv 动画顺利 - 按照他们的建议将 min-height 设置为 auto 会使 div 消失然后重新出现！任何人都可以帮忙吗？

更新：我制作了一个 jsFiddle 来演示这个问题。

4

3 回答 3

2

你可以尝试做类似的事情

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

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

这个想法是在动画之前重置min-height并将css属性设置为元素本身的计算高度。height

于 2013-01-18T09:03:47.847 回答
2

您需要height在 css 中使用，而不是min-height在事件中将高度降低到 100 并且 min-height 为 300 click。

现场演示

改变

#summary { min-height: 300px }

到

#summary { height: 300px; }

如果您需要使用 min-width，那么您需要在 animate 中更改 min-width 而不是 height。

于 2013-01-18T09:03:56.817 回答
1

在小提琴中试试这个：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

于 2013-01-18T09:06:46.540 回答