jQuery懸停與動畫然后動畫留在第二個處理程序問題？

Question

我似乎無法想出這個小問題。 當我用類.nav_button將鼠標懸停在div之外時，不透明度會發生變化，但是從底部向上移動15px的按鈕似乎沒有在第二個處理程序中生效？

JS：

$(document).ready( function(){
    $('.nav_button').hover( 
    function(){
    $(this).animate({top:'15px',opacity:'0.5'},'slow')
    },
    function(){
    $(this).animate({bottom:'15px',opacity:'1'},'slow')
    });
});

CSS：

.nav_button{
    height:80px;
    width:90px;
    margin-right:3px;
    border-radius:5px;
    border:2px solid #555879;
    background-color:#2182c2;
    display:inline-block;
    position:relative;

}

Answer 1

像這樣？ 演示http://jsfiddle.net/yeyene/kNts8/

JQUERY

$(document).ready( function(){
    $('.nav_button').hover( 
    function(){
    $(this).stop().animate({top:'-15px',opacity:'0.5'},'slow')
    },
    function(){
    $(this).stop().animate({top:'15px',opacity:'1'},'slow')
    });
});

CSS

.nav_button{
    background:red;
    position:relative;
    top:0px;
    padding:0 5px;
    z-index:100;
}