jquery boutons animés qui vient de se comporter wont

Question

Ok j'ai une liste en ligne de boutons.

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

Chaque élément de menu a une image d'arrière-plan, puis lorsque son plané l'image de fond est remplacée par une image plus grande. En fin de compte, je suis en train de construire un menu simple où passe la souris sur l'élément de menu semble glisser vers le haut. Mais en réalité, Jquery peut animer le toggleClass avec slideToggle. Le problème est que ce code actuel ne se comporte pas bien.

Il saute haut et en bas, parce que le texte est en mouvement. Je suis assez nouveau pour Jquery de sorte que toute aide est grandement appréciée. Je chargé également ce haut http://gasworks.ravennainteractive.com/result/

Merci

Answer 1

Essayez ceci ( démo ):

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

    });
});