Question

我有html as

<div id ="div-1>
  //some content
</div>
<div id ="div-2>
  //some content
</div>

当我设置显示时：div-1中的none立即隐藏，而div-2则显示在上面。

有没有办法将div-2滑到顶部，而不是直接进入。

PS

我已经尝试过将div-1的max-height设置为零但是，它不起作用。

修改

嗨，我正在使用js lib来刷掉html元素。

我只想要底部元素的动画滚动，当顶部的div设置为display：none。

我只参考了第一个div。

Answer 1

而不是设置display：none，你可以设置不透明度：div-1上的0和div-1上的div-2，使用z-index和css过渡来改变位置，或者使用jquery animate。

Answer 2

您可以使用slideUp jQuery方法轻松实现此目的 jQuery slideUp() doc

工作示例：

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>slideUp demo</title>
  <style>
    div {
      margin: 2px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

  <div>
    <button>Hide One</button>
    <input type="text" value="One">
  </div>

  <div>
    <button>Hide Two</button>
    <input type="text" value="Two">
  </div>

  <div>
    <button>Hide Three</button>
    <input type="text" value="Three">
  </div>

  <div id="msg"></div>

  <script>
    $("button").click(function() {
      $(this).parent().slideUp("slow", function() {
        $("#msg").text($("button", this).text() + " has completed.");
      });
    });
  </script>

</body>

</html>

＆＃13;

当display：none设置为div时，动画botton divs

2 个答案:

工作示例：