jQuery动画高度

Question

我有一个按钮和一个文本内部的div:

<h2>Click me</h2>
<div class="expand">Lot of text here....</div>

我想默认显示两行文本,所以我将高度设置为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);
});

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

Answer 2

scrollHeightDOM元素的属性也可以为您提供所需的高度.

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

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