jQuery mouseleave not working -

jQuery mouseleave not working -

ok basically, ive got smaller div (overlay) thats hidden shows/hides when mouse hovers on main div (box). when mouse hovers , overlay div slides up, when mouse leaves box div overlay remains , not slide down.

css

.box {border:1px reddish 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"}); });

your mouseleave should goto opposite value of initial animate:

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

http://jsfiddle.net/s4dsk/

jquery