動畫div與內容向下移動

我得到了一個表單，當用戶提交它時，它會在表頭輸入之上的標題下方淡出。現在它只是將表單輸入設置了一下，但我想要的是它慢慢下移。動畫div與內容向下移動

粗糙的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但我找不出它是如何工作的。

來源

2017-02-27 Wulthan

集callbackDiv初始狀態：

// CSS 
display: none

然後在回調，當你到顯示callbackDiv使用裏面的內容：

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

潛在的，如果你正在從一個Ajax調用的內容（我猜）你可以這樣做：

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

來源

2017-02-27 10:53:12

謝謝，這工作，我認爲CSS部分是問題 – Wulthan

動畫div與內容向下移動

回答

相關問題