Wulthan Wulthan -4 years ago 104
CSS Question

Animate div with content to move down

I got a form and when a user submits it, it fades in a callback below the header but above the form inputs. Right now it just sets the form inputs down a bit but what I want is that it slowly moves down.

Rough HTML-Code:

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

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

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


The div 'formbox' wraps a background around the whole form. In 'callbackDiv' then pops up a message. What I would like to get is that the 'formContent'slowly moves down and the 'formbox' background extends too.
Showing the callback is no problem. All I need is the animation part for 'formContent' and 'formbox'.

I saw jQueries .animate and .slideDown but I couldn't figure out how it works.

Answer Source

Set callbackDiv initial state to:

// CSS
display: none

Then in your callback when you get the content to display inside callbackDiv use:

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

Potentially if you are getting the content from an ajax call ( i guess so ) you can do:

$("#callbackDiv").html(your_content).slideDown("fast");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download