jQuery 动画高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4603397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery animate height
提问by Andrea Turri
I have a button and a div with inside some text:
我有一个按钮和一个 div，里面有一些文字：
<h2>Click me</h2>
<div class="expand">Lot of text here....</div>
I want to show just 2 rows of the text as default, so I put height to 30px and overflow Hidden.
我想只显示 2 行文本作为默认值，所以我将高度设置为 30px 并溢出隐藏。
When I click on the H2 element I want animate the text to slideDown and if i click another time it will slideUp to the default height (30px).
当我单击 H2 元素时，我希望将文本设置为向下滑动，如果我再次单击它，它将向上滑动到默认高度（30 像素）。
I'm trying many things with jQuery, but it doesn't work.
我正在用 jQuery 尝试很多东西，但它不起作用。
EDIT:
编辑：
I also have more than one "expand" and more than one "H2" and text is different into div, so the height is not fix... I would like to slide to the "auto" height or 100%.
我也有不止一个“展开”和不止一个“H2”，文本与 div 不同，所以高度不是固定的......我想滑动到“自动”高度或 100%。
Can someone help me? Thanks!
有人能帮我吗？谢谢！
回答by Nick Craver
You can store the height just before slimming it down to 30px on page load, for example:
您可以在页面加载时将其缩小到 30px 之前存储高度，例如：
$(".expand").each(function() {
$.data(this, "realHeight", $(this).height());
}).css({ overflow: "hidden", height: "30px" });
Then in your clickhandler:
然后在您的click处理程序中：
$("h2").toggle(function() {
var div = $(this).next(".expand")
div.animate({ height: div.data("realHeight") }, 600);
}, function() {
$(this).next(".expand").animate({ height: 30 }, 600);
});
So what this does is get the .height()(run this in document.ready) beforethe overflow: hiddenit set, and stores it via $.data(), then in the clickhandlers (via .toggle()to alternate), we use that value (or 30) every other click to .animate()to.
所以它所做的是在它设置之前获取.height()（在 中运行document.ready），并通过 存储它，然后在处理程序中（通过交替），我们每隔一次点击使用该值（或 30）。overflow: hidden$.data()click.toggle().animate()
回答by Torin Finnemann
The scrollHeightproperty of the DOM element could also give you the height you need.
scrollHeightDOM 元素的属性也可以为您提供所需的高度。
$(".expand").animate({
height : $(".expand")[0].scrollHeight
},2000);
Working example can be found at http://jsfiddle.net/af3xy/4/
可以在http://jsfiddle.net/af3xy/4/找到工作示例
回答by Jules
This thread is not the newest, but here's another approach.
这个线程不是最新的，但这是另一种方法。
I have been dealing with the very same issue today and could not get it to work properly. Even with the correct height calculated with height: autoapplied, the animation would not give me the correct results. I tried putting it in $(window).loadinstead of $(document).ready, which helped a little, but still cut off my last line of text.
我今天一直在处理同样的问题，但无法正常工作。即使使用height: auto应用计算出正确的高度，动画也不会给我正确的结果。我试着把它放在$(window).load而不是$(document).ready，这有点帮助，但仍然切断了我的最后一行文字。
Instead of animating the height itself, I was able to resolve the issue by adding and removing a hiddenclass to my div dynamically. If you use jQuery-UI, you can apply a duration to these effects. This seems to work in all browsers, too.
我没有为高度本身设置动画，而是通过动态地向我的 div添加和删除隐藏类来解决这个问题。如果使用jQuery-UI，则可以对这些效果应用持续时间。这似乎也适用于所有浏览器。
