Jqueryui prevent event stacking

I am using jqueryui's drop effect to show an element on mouseenter and hide it on mouseleave. Problem is if you mouse in an out of an element a few times the events stack up and cause it to loop through hiding/showing when you are no longer mousing in/out of the element.

I wanna know if there is a built in way to jquery ui to pause or stop an effect in process and start another to prevent stacking. If anyone also has a link to more functionality of controlling jqueryui functionality that would be swell ( mai开发者_StackOverflown site just shows how to use an effect not really manipulate it much as far as I can tell ).

Thanks in advance!

To stop an effect or animation that's in progress call $(..).stop()

Try this:

$("#divHover").hover(
function(){
    $("#divHidden").stop(true,true).show(100);
}, 
function(){
    $("#divHidden").stop(true,true).hide(100);
});

the demo i'm using hide, but, its up to you to decide what to use

Demo: http://jsfiddle.net/hfpVc/38/