我试图让一个元素动画到它的"自然"高度 - 即它的高度height: auto;.
我想出来了:
var currentHeight = $this.height();
$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//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'); …我已经在Stack Overflow上搜索了这个,找到了很多答案,但没有一个与我的具体用途有关...基本上我不知道为什么这个代码不起作用的人请帮忙!任何输入都非常感谢,谢谢!
下面是用HTML的div点击与id中elementTop和div与动画高度所示elementBottom
<div id="elementTop" onclick="toggle_visibility('elementBottom');" >
<img id="thumb" src="images/davey1.png" />
<a>davey blair</a>
</div>
<div id="elementBottom">
<p><span style="font-weight: bold;">age: </span>29</p>
<p><span style="font-weight: bold;">hometown: </span>Charleston,SC</p>
<p><span style="font-weight: bold;">regular or goofy: </span>Regular</p>
<p><span style="font-weight: bold;">years shredding: </span>lifetime</p>
<p><span style="font-weight: bold;">other sponsors: </span>naish, chucktown</p>
<p><span style="font-weight: bold;">favorite trick: </span>switch mobe</p>
<p><span style="font-weight: bold;">favorite place to shred: </span>with my homies</p>
<p><span style="font-weight: bold;">music preference: </span>all music</p>
<p><span style="font-weight: bold;">paper or plastic: </span>hands</p>
<p><span style="font-weight: bold;">cat …