Question

我有一个表单，当用户提交表单时，它会在标题下面的回调中淡出但在表单输入上方。现在它只是将表单输入设置为一点，但我想要的是它慢慢向下移动。

粗糙的HTML代码：

<body>
<div class="formbox">
    <h1>My Header</h1>

    <div id="callbackDiv"></div>

    <div id="formContent">
      // My different HTML-Input-Elements
    </div>
</div>
</body>

div'formbox'围绕整个表单包装背景。在'callbackDiv'中弹出一条消息。我想得到的是'formContent的向下移动，'formbox'背景也延伸了。显示回调没问题。我只需要'formContent'和'formbox'的动画部分。

我看到了jQueries .animate和.slideDown，但我无法弄清楚它是如何工作的。

Answer 1

将callbackDiv初始状态设置为：

// CSS
display: none

然后在回调中，当你在callbackDiv中显示内容时使用：

// Javascript (Jquery)
$("#callbackDiv").slideDown("fast");

如果您从ajax调用中获取内容（我猜是这样），您可以这样做：

$("#callbackDiv").html(your_content).slideDown("fast");

动画div以及要向内移动的内容

1 个答案: