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.
- when mouse moved triggers mouseenter event
- height increased 300
- slidesup height animated 0
- which leaves mouse outside div
- when mouse moved triggers mouseleave event
- height = 60px;
- slidesdown height = 60
- 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.
Comments
Post a Comment