After a user submits a form, I want to create a smooth animation where the form inputs slowly move down below the header but above the rest of the form. Currently, the form just shifts down abruptly, but I'm looking for a more graceful transition.
Below is the basic HTML structure:
<body>
<div class="formbox">
<h1>My Header</h1>
<div id="callbackDiv"></div>
<div id="formContent">
// Various HTML input elements here
</div>
</div>
</body>
The 'formbox' div contains the entire form with a background, and when a user submits the form, a message appears in the 'callbackDiv'. To achieve the desired effect, I need the 'formContent' section to smoothly move down along with the extended background of 'formbox'.
I have attempted using jQuery's .animate and .slideDown functions, but so far, I haven't been able to make it work as expected.