如何使用jQuery将元素动画化到其自然的高度 [英] How can I Animate an Element to its natural height using jQuery
问题描述
height：auto; 的高度。 > 我想出了这个：
var currentHeight = $ this。高度（）;
$ this.css（'height'，'auto'）;
var height = $ this.height（）;
$ this.css（'height'，currentHeight +'px'）;
$ this.animate（{'height'：height}）;
有更好的方法吗？
编辑：
这是一个完整的脚本，供任何想测试的人使用。
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/ TR / html4 / loose.dtd>
< html lang =en>
< head>
< title> jQuery< / title>
< style type =text / css>
p {overflow：hidden; background-color：red; border：1px solid black; }
.closed {height：1px; }
< / style>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js>< / script>
< script type =text / javascript>
$（）。ready（function（）
{
$（'div'）click（function（）
{
$（'p'）。每个（function（）
{
var $ this = $（this）;
if（$ this.hasClass（'closed'））
{
var currentHeight = $ this.height（）;
$ this.css（'height'，'auto'）;
var height = $ this.height（）;
$ this .css（'height'，currentHeight +'px'）;
$ this.animate（{'height'：height}）;
}
else
{
$ this.animate（{'height'：1}）;
}
$ this.toggleClass（'closed'）;
}）;
}）;
}）;
< / script>
< / head>
< body>
< div>点击我< / div>
< p>您好 - 我已开始营业< / p>
< p class =closed>您好 - 我已关闭了< / p>
< / body>
< / html>
我可以建议一个同样疯狂的解决方案...克隆元素，将其置于视野之外，并获取其高度...然后删除它并为你的原始动画。
除此之外，你也可以使用$ .slideUp （）和$ .slideDown（）：
$ this.hasClass $（this）.slideDown（）：$（this）.slideUp（）;
如果你需要保持一个1px的行，你可以应用一个父元素：
< div style ='border-top：1px solid＃333333'>
< div class ='toggleMe'> Hello World< / div>
< / div>
在.toggleMe div上应用slidingUp / Down。
I'm trying to get an element to animate to its "natural" height - i.e. the height it would be if it had height: auto;.
I've come up with this:
var currentHeight = $this.height();
$this.css('height', 'auto');
var height = $this.height();
$this.css('height', currentHeight + 'px');
$this.animate({'height': height});
Is there a better way to do this? It feels like a bit of a hack.
Edit: Here's a complete script to play with for anyone that wants to test.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>jQuery</title>
<style type="text/css">
p { overflow: hidden; background-color: red; border: 1px solid black; }
.closed { height: 1px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$().ready(function()
{
$('div').click(function()
{
$('p').each(function()
{
var $this = $(this);
if ($this.hasClass('closed'))
{
var currentHeight = $this.height();
$this.css('height', 'auto');
var height = $this.height();
$this.css('height', currentHeight + 'px');
$this.animate({'height': height});
}
else
{
$this.animate({'height': 1});
}
$this.toggleClass('closed');
});
});
});
</script>
</head>
<body>
<div>Click Me</div>
<p>Hello - I started open</p>
<p class="closed">Hello - I started closed</p>
</body>
</html>
I could suggest an equally-hackish solution...Clone the element, position it out of view, and get its height...then delete it and animate your original.
That aside, you could also use $.slideUp() and $.slideDown():
$this.hasClass('closed') ? $(this).slideDown() : $(this).slideUp() ;
If you need to keep a 1px line, you can apply that with a parent element:
<div style='border-top:1px solid #333333'>
<div class='toggleMe'>Hello World</div>
</div>
And apply the slidingUp/Down on the .toggleMe div.
这篇关于如何使用jQuery将元素动画化到其自然的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
