jquery animato pulsanti che si comportano proprio wont

Question

Ok Ho una lista in linea di pulsanti.

<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;
    });
});

Ogni voce di menu ha un'immagine di sfondo, e poi, quando la sua aleggiava l'immagine di sfondo viene sostituito da un'immagine più alto. In definitiva Sto cercando di costruire un semplice menu in cui al passaggio del mouse sulla voce di menu sembra scorrere verso l'alto. Ma in realtà Jquery può animare la toggleClass con slideToggle. Il problema è che questo codice attuale non si comporta bene.

Si salta su e giù, perché il testo è in movimento. Sono abbastanza nuovo per Jquery quindi ogni aiuto è molto apprezzato. Ho anche caricato questo fino a http://gasworks.ravennainteractive.com/result/

grazie

Answer 1

Prova questo ( demo ):

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');
        })

    });
});