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