入力要素をアニメーションで拡大する

Question

入力フィールドを拡張したいと考えました。だからこれはほとんど動作しますが、実は "まばゆい"です。フィールドが拡大され、並び替えられ、相互にインタセットされると、2番目の入力が次の行に移動します。どのようにそれを書くか書き直す方法をアドバイスすることができますか？

のjQuery

$('#menusearchform .s').mouseenter(function(){ 
     var $this = $(this); 
     if (!$this.data('expand')) { 
        $this.data('expand', true); 
        $this.animate({width:'+=32px',left:'-=16px'}); 
     } 
     $this.val("").focus(); 
}).mouseleave(function(){ 
     var $this = $(this); 
     $this.data('expand', false); 
     $this.animate({width:'-=32px',left:'+=16px'}); 
    }); 

HTML

<div id="divsearch"> 
    <form method="post" action="index.php" id="menusearchform"> 

      <input class="s" type="text" value="Search" name="felem1" /> 
      <input class="s" type="text" value="Search" name="felem2" /> 

      <input type="submit" value="Search" name="buttonSearch" /> 
      <input type="reset" value="Reset" name="buttonReset" id="Reset"/> 
    </form> 
</div> 

Answer 1

あなたはフォーム全体が拡大したくない推測。これはあなたが必要とするものかもしれません：http://jsfiddle.net/fpgAn/1/