Enlarge input element with animation

I wanted to expand the input fields. So this almost works but the efect is "blinky". The field expands and colapses and intereseting makes the second input to go to the next row. Can you give any advise how to do it write or rewrite it in some way!?!?!

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);
        $thi开发者_如何学Cs.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>

Guessing you don't want whole form to expand. Maybe this is what you need: http://jsfiddle.net/fpgAn/1/