CODEWITHSUNDEEP
jquery
Pascoe_
Pascoe_

Reputation: 3

jQuery mouseleave not working

Ok so basically, Ive got a smaller div (overlay) thats hidden that shows/hides when the mouse hovers over the main div (box). So when the mouse hovers , the overlay div slides up, but when the mouse leaves the box div the overlay remains and does not slide back down.

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

Upvotes: 0

Views: 90

Answers (2)

tymeJV
tymeJV

Reputation: 104775

Your mouseleave should goto the opposite value of your initial animate:

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

http://jsfiddle.net/S4dsk/

Upvotes: 1

Shail
Shail

Reputation: 873

Try this

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

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

},function(){

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

});

Upvotes: 0

Related Questions