Animate自动调整表格形式

Question

在HTML中，我有一个form，包裹在div中。这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);