jQuery动画高度 [英] jQuery animate height

问题描述

我有一个按钮和一个带一些文本的div:

I have a button and a div with inside some text:

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

默认情况下，我只希望显示两行文本，因此我将高度设置为30px并隐藏.

I want to show just 2 rows of the text as default, so I put height to 30px and overflow Hidden.

当我单击H2元素时，我希望使文本动画向下滑动，如果再次单击，它将滑动到默认高度(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).

我正在尝试使用jQuery进行很多操作，但这没用.

I'm trying many things with jQuery, but it doesn't work.

我还有一个以上的扩展"和一个以上的"H2"，并且div中的文本不同，因此高度不固定...我想滑至自动"高度或100％.

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%.

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

Can someone help me? Thanks!

推荐答案

您可以在页面加载时将高度减至30px之前存储高度，例如:

You can store the height just before slimming it down to 30px on page load, for example:

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

然后在您的click处理程序中:

Then in your click handler:

$("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中运行) em>设置的overflow: hidden，并通过 $.data() 并将其存储在click处理程序中(通过 .toggle() 进行替换)，我们每隔一次点击就会将该值(或30)用于

So what this does is get the .height() (run this in document.ready) before the overflow: hidden it set, and stores it via $.data(), then in the click handlers (via .toggle() to alternate), we use that value (or 30) every other click to .animate() to.

这篇关于jQuery动画高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！