jQuery动画高度答案

【问题标题】：jQuery animate heightjQuery动画高度
【发布时间】：2011-06-03 22:55:33
【问题描述】：

我有一个按钮和一个 div，里面有一些文本：

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

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

当我点击 H2 元素时，我希望将文本动画化为向下滑动，如果我再次点击，它将向上滑动到默认高度 (30px)。

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

编辑：

我还有不止一个“展开”和不止一个“H2”，并且文本与 div 不同，所以高度不固定......我想滑动到“自动”高度或 100%。

有人可以帮助我吗？谢谢！

【问题讨论】：

标签： jquery animation slide

【解决方案1】：

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

$(".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() 到。

【讨论】：

，如果我有多个展开并且每个展开的文本都不同，我如何获得 RealHeight？
@Toro - .data() 按元素存储，因此这适用于任意数量的 <h2> 和 <div> 对:)

【解决方案2】：

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

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

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

【讨论】：

你能以越来越快的速度制作动画吗？喜欢让水滴加速吗？
是的，它由动画函数的“easing”（第三个）参数定义。 jQuery 内置了一些缓动，更多的是作为 ui 库的一部分，或者您可以编写自己的。查看更多信息：api.jquery.com/animate/#easing

【解决方案3】：

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

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

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

Here's a working exampe.

【讨论】：