jquery - mouseenter and leave with slide -

i want slideup div when mouse hit minimized element , slide down when user leaves it:

$('#managerpane').mouseenter(function(){   $('#managerpane').height(300).slideup(); });  $('#managerpane').mouseleave(function () {   $('#managerpane').height(60).slidedown(); });   <div id="managerpane" style="position:absolute;left:10px;bottom:0px;z-index:1000;height:60px; background:white; overflow-x: auto; max-width: 76%;" >     <div>.childs..</div> </div> 

the div slides , down. what's wrong?

during slideup div height becomes 0 (slowly) mouse pointer no longer on div. on next mouse move leave event triggered , hence slidedown,mouse again comes on div. result in multiple mouseenter mouseleave events , hence div goes , down.

1. when mouse moved triggers mouseenter event
2. height increased 300
3. slidesup height animated 0
4. which leaves mouse outside div
5. when mouse moved triggers mouseleave event
6. height = 60px;
7. slidesdown height = 60
8. mouse enters div. goes state 1

when move mouse on div processes 1-8 happens continously. ie triggers multiple up&down events.

if want animate height change

$('#managerpane').mouseenter(function(){ $(this).animate({height:300},500); console.log("enter"); });  $('#managerpane').mouseleave(function () { $(this).animate({height:60},500); console.log("leave"); }); 

this works fine. if log event in snippet can see multiple events getting fired.