animation d'un formulaire de recherche personnalisé

Bonjour
J'ai un problème et j'ai besoin de votre aide. Je veux faire une animation en utilsant jquery permettant d'afficher un formulaire de recherche personnalisé lorsque je passe la souris dessus.

Le formulaire contient une zone de texte et un bouton. La zone de texte est en display none. le formulaire et le bouton ont presque les mêmes dimensions. Au passage de la souris, je veux élargir le formulaire et afficher la zone de texte dedans, tout en gardant le bouton à droite du formulaire. Et lors d'un mouseout, la zone de texte se cache et le formulaire se rétrécit pour revenir à l'état initial (c'est semblable à la zone de recherche de grafikart).

Voici mon code, ça donne un comportement bizarre et j'aimerai avoir votre aide svp :

Code html

<div id="recherche">
<form id="formulaire_recherche" method="post" name="f">
<input id="search-text" type="text" onfocus="if (this.value == 'Rechercher ...') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'Rechercher ...'; }" value="Rechercher ...">
<input id="search-button" type="submit" value="Go" name="Submit">
</form>
</div>

Code css

#recherche
{
    margin:10px auto 35px;
    padding:0;  
    width:1024px;
    text-align:center;
}

#formulaire_recherche
{
    width:96px;
    margin:0 auto;
    padding:0;
    background-color:#999;  
    border-radius:2em;  
    height:52px;
}

#search-text
{
    width:380px;
    background-color:#999;  
    margin:17px 10px;
    padding:0;
    color:#FFF;
    border:none;
    font-size:13px;
    font-family:Arial;
    display:none;
}

#search-button
{
    background-color:#CCC;
    border:none;
    width:90px;
    height:46px;
    float:right;
    border-radius:2em;
    margin:3px;
    padding:0;
    color:#FFF;
    font-family:Arial;
    font-weight:700;
    cursor:pointer;
}

Code JS

$("#formulaire_recherche").mouseover(function()
    {
        if ($(this).width() == 96)
        {
            $(this).animate({width:"500"});
            $("#search-text").slideDown();
        }
    });

    $("#formulaire_recherche").mouseout(function()
    {
        if ($(this).width() == 500)
        {
            $("#search-text").hide();
            $(this).animate({width:"96"});
        }
    });