Анимировать автоматическое изменение размера формы

Question

В HTML у меня есть form, завернутый в div. У этого div нет явного height, заданного в CSS, но вместо этого есть шанс height в зависимости от содержимого.

Когда пользователь нажимает кнопку, функция Javascript добавляет несколько элементов в форму. Опять же, явное height не рассматривается; div просто изменяет размер, чтобы соответствовать новому содержимому.

Когда пользователь нажимает другую кнопку, функция Javascript удаляет первый элемент из формы.

Есть ли способ плавно анимировать эти настройки, используя Javascript? В настоящее время в проекте используется jQuery, поэтому доступно все встроенное в него.

Демо-код:

<!--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);