jQuery mouseleave无法正常工作

Question

好吧基本上，我有一个较小的div（叠加）隐藏显示/隐藏当鼠标悬停在主div（框）上时。因此，当鼠标悬停时，叠加div会向上滑动，但当鼠标离开盒子div时，叠加层将保持不变，并且不会向下滑动。

CSS

.box {border:1px red solid; width:250px; height:230px; position:relative; overflow:hidden}      
.overlay {position:absolute; background-color:red;  width:100%; height:50px; bottom:-60px}

HTML

<div class="box"><div class="overlay">content</div></div>

JS

$('.box').hover(function(){
    $('.overlay').animate({top:"180px"});
}); 

$('.box').mouseleave(function(){
    $('.overlay').animate({bottom:"180px"});  
});

Answer 1

您的mouseleave应该与您的初始动画相反：

$('.overlay').animate({top:"-180px"}); 

http://jsfiddle.net/S4dsk/

Answer 2

试试这个

$('.box').hover(function(){

    $('.overlay').animate({top:"180px"});

},function(){

    $('.overlay').animate({bottom:"180px"});

});