Gre*_*reg 16 javascript css jquery
我试图让一个元素动画到它的"自然"高度 - 即它的高度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');
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>
Pio*_*oul 11
我允许自己回答这个问题,即使很久以前它已被回答,因为它只是帮助了我.
事实上,我不明白第一个答案:为什么打开一个半封闭的元素来获得它的高度,然后再次关闭它？
在开始时,您隐藏元素,以便只显示其中的一部分,对吧？使用javascript,最好的方式(我相信)是这样做的.因此,当您隐藏元素时,只需将orig高度保存在var中,这样您就不必隐藏(onready)-show-save height-hide以便能够切换元素可见性.
看看我做了什么,它完美地运作:
$(document).ready(function(){
var origHeight = $("#foo").css('height');
$("#foo").css({"height" : "80px"});
$("#foo .toggle").bind("click", function(event){ toggleFoo(event, lastSearchesMidHeight); });
});
在这里,当你调用你的切换功能时,你知道你的原始元素高度是多少,而不是四处游荡.
我写得很快,希望它能帮助将来的某个人.
小智 10
我找到的最简单的解决方案是简单地用一个高度有限的div包装内容元素并设置为overflow:hidden.这会将内部内容元素截断为包装div的高度.当用户点击,悬停等以显示内容元素的完整高度时 - 简单地将包装div设置为内部内容div的高度.
我可以建议一个同样hackish的解决方案......克隆元素,将其置于视图之外,并获得其高度...然后删除它并为原始动画制作动画.
除此之外,您还可以使用$ .slideUp()和$ .slideDown():
$this.hasClass('closed') ? $(this).slideDown() : $(this).slideUp() ;
如果需要保留1px行,可以将其应用于父元素:
<div style='border-top:1px solid #333333'>
<div class='toggleMe'>Hello World</div>
</div>
并在.toggleMe div上应用slidingUp/Down.