jQuery动画高度

Question

我有一个按钮和一个包含文本的div：

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

我想默认只显示两行文本，所以我将高度设置为30px并使用overflow:hidden。

当我点击H2元素时，希望动画向下滑动文本，如果再次点击，则会向上滑动到默认高度（30px）。

我尝试了很多用jQuery的方法，但都没有成功。

编辑：

我的页面有多个“展开”和多个“H2”，而且每个div内的文本都不同，因此高度不是固定的... 我希望能够滑动到“自动”高度或100%。

有人可以帮忙吗？ 谢谢！

- Andrea Turri

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);
});

所以这个代码会在 document.ready 中获取 .height() （在设置 overflow:hidden之前），通过 $.data（） 存储它，然后在单击处理程序（通过 .toggle() 交替）中使用该值（或30），每隔一个点击进行一次 .animate（） 动画。

- Nick Craver

---

如果我有多个展开项且每个文本都不同，如何获取实际高度？ - Andrea Turri

@Toro - .data() 是按元素存储的，因此对于任意数量的 <h2> 和 <div> 对都有效 :) - Nick Craver

Answer 2

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

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

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

- Torin Finnemann

---

你能够制作动画并逐渐增加速度吗？比如让物体加速下落？ - SamAko

是的，这由animate函数的“easing”（第三个）参数定义。jQuery内置了一些缓动效果，更多的是作为UI库的一部分，或者您可以编写自己的缓动效果。请参见：https://api.jquery.com/animate/#easing - Torin Finnemann

Answer 3

这个帖子可能不是最新的，但是我有另一种方法。

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

我通过对 div 动态添加和删除一个 隐藏类来解决这个问题。如果你使用 jQuery-UI，你可以对这些效果应用一个持续时间。这在所有浏览器中似乎都有效。

这是一个可工作的例子。

- Jules