Question

In HTML, I have a form, wrapped in a div. This div does not have an explicit height set in CSS, but instead chances height depending on the contents.

When a user presses a button, a Javascript function adds several elements to the form. Again, no explicit height is dealt with; the div just resizes to fit its new contents.

When a user presses another button, a Javascript function removes the first element from the form.

Is there any way to smoothly animate these adjustments, using Javascript? The project currently uses jQuery, so anything built into that is available.

Demo Code:

<!--HTML FILE-->
<!--...-->
<button onclick="add_field();">ADD FIELD</button>
<button onclick="del_field();">DEL FIELD</button>
<div>
    <form>
        <input type="text" id="text_field"/>
        <input type="submit"/>
    </form>
</div>
<!--...--->

//Javascript File
function add_field()
{
    $("<input type='text'/>").insertBefore($("#text_field"));
}
//...

Answer 1

$("<input type='text'/>")
    .css('display', 'none')
    .insertBefore($("#text_field"))
    .toggle(_duration);