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

喜欢这个？ DEMO 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;
}