如何将 div 的高度从动态值设置为动态高度值？答案

【问题标题】：How can I animate a height of a div starting from a dynamic value to its dynamic height value?如何将 div 的高度从动态值设置为动态高度值？
【发布时间】：2010-06-24 17:30:35
【问题描述】：

我想用slideDown()的效果让第一个div显示出来，从最后一个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>

【问题讨论】：

目标高度应该从哪里来？

标签： jquery jquery-animate

【解决方案1】：

试试这样的：

$("div:last").animate({'height':'auto'},"slow");

【讨论】：

【解决方案2】：

找到了答案。没想到可以得到隐藏元素的尺寸，自然而然的解决了..

    <script type="text/javascript">
        $(document.body).click(function () {
            if ($("div:first").is(":hidden")) {
                var hidden = $("div:first").height();
                var showing = $("div:last").height();
                $("div:last").hide();
                $("div:first").height(showing);
                $("div:first").animate({'height':hidden},"slow");
            } else {
                var hidden = $("div:last").height();
                var showing = $("div:first").height();
                $("div:first").hide();
                $("div:last").height(showing);
                $("div:last").animate({'height':hidden},"slow");
            }
        });
    </script>

不适用于“高度”：“自动”。

ps。我是AlqQ。我想我前一段时间注册了，现在当我使用 OpenID 登录时，它会将我重定向到这个旧帐户，这对我来说很好。

【讨论】：