如何使用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屋!