Как я могу анимировать высоту div, начиная с динамического значения до его динамического значения высоты? - PullRequest
Новая
       14

Как я могу анимировать высоту div, начиная с динамического значения до его динамического значения высоты?

0 голосов
/ 24 июня 2010

Я хочу использовать эффект 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>

Ответы [ 2 ]

0 голосов
/ 24 июня 2010

Нашел ответ. Я понятия не имел, что вы можете получить размеры скрытых элементов, и решение пришло естественным путем. 

    <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>

Не работает с 'height': 'auto'.

пс. Я AlqQ. Я предполагаю, что я зарегистрировался некоторое время назад, и теперь, когда я вхожу с OpenID, он перенаправляет меня на эту старую учетную запись, что мне подходит.

0 голосов
/ 24 июня 2010

Попробуйте что-то вроде этого: 

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