jQuery анимированные кнопки, которые просто не работают

Question

Хорошо, у меня есть встроенный список кнопок.

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

Каждый пункт меню имеет фоновое изображение, а затем, когда его парил фоновое изображение заменяется на более высокий образ. В конечном итоге я пытаюсь создать простое меню, в котором при наведении курсора появляется пункт меню вверх. Но на самом деле JQuery может анимировать toggleClass с slideToggle. Проблема в том, что этот текущий код не ведет себя правильно.

Он прыгает вверх и вниз, потому что текст движется. Я довольно новичок в JQuery, поэтому любая помощь очень ценится. Я также загружены это вверх на http://gasworks.ravennainteractive.com/result/

благодаря

Answer 1

Попробуйте это (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'); 
     }) 

    }); 
});