jQuery animado botones que simplemente se comportan costumbre

Question

Ok tengo una lista en línea de botones.

<ul id="nav">
   <li class="home"><a href="#">Menu Item</a></li>
   <li class="contact"><a href="#">Menu Item</a></li>
   <li class="about"><a href="#">Menu Item</a></li>
</ul>

.home{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line.png);
background-repeat:no-repeat;
height:34px;
width:134px;
}
.home_hover{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line_over.png);
background-repeat:no-repeat;
height:70px;
width:134px;
}

$(document).ready(function(){
 $("#nav .home").mouseover(function(){
        $(this).toggleClass("home_hover").slideToggle("slow");
        return false;
    }).mouseout(function(){
        $(this).toggleClass("home_hover").slideToggle("slow");
        return false;
    });
});

Cada elemento de menú tiene una imagen de fondo, y luego cuando su flotaba la imagen de fondo se sustituye por una imagen de alto. En última instancia Estoy tratando de construir un menú sencillo en el que al pasar el ratón sobre el elemento de menú aparece a deslizarse hacia arriba. Pero en realidad Jquery puede animar la toggleClass con slideToggle. El problema es que este código actual no se comporta bien.

Se salta hacia arriba y hacia abajo, ya que el texto está en movimiento. Soy bastante nuevo en jQuery por lo que cualquier ayuda es muy apreciada. También he cargado esto en http://gasworks.ravennainteractive.com/result/

gracias

Answer 1

Probar ( demostración ):

CSS:

#header{
    height:100px;
}

#nav{
    height:34px;
    position:relative;
}

.home{
    position:absolute;
    bottom:0;
    background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line.png);
    background-repeat:no-repeat;
    height:34px;
    width:134px;
}

.home_hover{
    background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line_over.png);
}

Script

$(document).ready(function(){
    $("#nav li").mouseover(function(){
        $(this).addClass('home_hover').stop().animate({ height: '70px'},'slow');

    }).mouseout(function(){
        $(this).stop().animate({ height: '34px'},'slow', function(){  
            $(this).removeClass('home_hover');
        })

    });
});