jquery Tasten animiert, die einfach gewohnt verhalten

Question

Ok Ich habe eine Inline-Liste der Schaltflächen.

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

Jeder Menüpunkt hat ein Hintergrundbild, und dann, wenn sein schwebte das Hintergrundbild wird durch eine größere Bild ersetzt. Letztlich versuche ich ein einfaches Menü zu bauen, wo mit der Maus darüber der Menüpunkt nach oben zu gleiten scheint. Aber in Wirklichkeit JQuery kann die toggleClass mit slideToggle animieren. Das Problem ist, dass dieser aktuelle Code nicht richtig verhalten.

Es springt auf und ab, weil der Text bewegt. Ich bin ziemlich neu in Jquery so wird jede Hilfe sehr dankbar. Ich lud diese auch bis unter http://gasworks.ravennainteractive.com/result/

Dank

Answer 1

Versuchen Sie, diese ( 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);
}

Schrift

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

    });
});