如何将 div 的高度从动态值动画化为其动态高度值？
我想对第一个div使用slideDown()的效果来显示它，从最后一个div动态生成的高度开始到其内容动态生成的高度？
在下面的代码中，有问题的部分是 .animate({'height':'200px'} / .animate({'height':'100px'} ，值 200px 和 100px 应该动态生成。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Slide Down</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
div {background:#de9a44;width:80px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div style="display: none">
In pellentesque risus sit amet magna consectetur nec consequat eros ornare.
</div>
<div>Vivamus placerat eleifend rutrum</div>
Click!
<script type="text/javascript">
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
var height = $("div:last").height();
$("div:last").hide();
$("div:first").height(height);
$("div:first").animate({'height':'200px'},"slow");
} else {
var height = $("div:first").height();
$("div:first").hide();
$("div:last").height(height);
$("div:last").animate({'height':'100px'},"slow");
}
});
</script>
</body>
</html>
I want to use the effect of slideDown() for the first div to show it, starting from the dynamically generated height of last div to a height dynamically generated by its content within?
In the code bellow the part with the problem is .animate({'height':'200px'} / .animate({'height':'100px'} , the value 200px and 100px should be dynamically generated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Slide Down</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
div {background:#de9a44;width:80px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div style="display: none">
In pellentesque risus sit amet magna consectetur nec consequat eros ornare.
</div>
<div>Vivamus placerat eleifend rutrum</div>
Click!
<script type="text/javascript">
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
var height = $("div:last").height();
$("div:last").hide();
$("div:first").height(height);
$("div:first").animate({'height':'200px'},"slow");
} else {
var height = $("div:first").height();
$("div:first").hide();
$("div:last").height(height);
$("div:last").animate({'height':'100px'},"slow");
}
});
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试这样的事情：
Try something like this:
找到了答案。我不知道你可以获取隐藏元素的尺寸，解决方案自然而然......
不适用于 'height':'auto'。
附注我是AlqQ。我想我不久前注册了，现在当我使用 OpenID 登录时，它会将我重定向到这个旧帐户，这对我来说没问题。
Found the answer. I had no idea that you can get the dimensions of hidden elements, and the solution came naturally..
Does not work with 'height':'auto'.
ps. I am AlqQ. I guess I registered some time ago and now when I log in with an OpenID it redirects me to this old account, which is fine by me.