jQuery动画高度

我有一个按钮和div内部的一些文字：

Click me
 
Lot of text here.... 

我想默认显示两行文本，所以我将高度设置为30px并溢出隐藏。

当我点击H2元素时，我希望将文本设置为slideDown动画，如果我再点击一次，它将会滑动到默认高度（30px）。

我正在用jQuery尝试很多东西，但它不起作用。

编辑：

我也有不止一个“扩展”和多个“H2”和文本不同的div，所以高度不固定…我想滑到“自动”高度或100％。

有人能帮我吗？ 谢谢！

Answer 1

您可以在页面加载时将其减小到30px之前存储高度，例如：

 $(".expand").each(function() { $.data(this, "realHeight", $(this).height()); }).css({ overflow: "hidden", height: "30px" }); 

然后在你的click处理程序：

 $("h2").toggle(function() { var div = $(this).next(".expand") div.animate({ height: div.data("realHeight") }, 600); }, function() { $(this).next(".expand").animate({ height: 30 }, 600); }); 

所以这样做是在overflow: hidden 之前得到.height() （在document.ready运行） overflow: hidden它设置，并通过$.data()存储它，然后在click处理程序中（通过.toggle()来交替） ），我们使用该值（或30）每隔一次点击.animate()来。

Answer 2

DOM元素的scrollHeight属性也可以为您提供所需的高度。

 $(".expand").animate({ height : $(".expand")[0].scrollHeight },2000); 

可以在http://jsfiddle.net/af3xy/4/找到工作示例

Answer 3

这个post不是最新的，但这是另一种方法。

我今天一直在处理同样的问题，无法让它正常工作。 即使使用高度计算的正确高度height: auto应用，动画也不会给我正确的结果。 我尝试将它放在$(window).load而不是$(document).ready ，这有点帮助，但仍然切断了我的最后一行文本。

我没有动画高度本身，而是通过动态添加和删除隐藏类来解决问题。 如果使用jQuery-UI ，则可以对这些效果应用持续时间。 这似乎也适用于所有浏览器。

这是一个有效的例子。