フォームのアニメーション自動サイズ変更

Question

HTMLではdivにラップされたformがあります。このdivには、CSSに明示的にheightが設定されていませんが、内容によっては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);