How to interrupt the HoverOut handler

Question

I have the following situation:

I have an object, let's call it "Button". When you go through the Button, you make another "Info" object lowered. Of course, when your mouse leaves the Button, the information slides up and disappears. But Info has a link, and the user may want to click it. I can delay the Info popup, but I cannot stop it after reaching Info.

This is the code I'm using.

$("#button").hover(function(){ $("#info").slideDown("fast"); }, function(){ //the handlerOut $("#info").delay(1000).slideUp("fast"); }); 

How can I tell a button to not display after I hang it?

Answer 1

You can use stop() to stop the animation currently in the queue. Note that stop() stops any current animation, wherever it is, so in this case we need to stop the animation and .

(As before, before you solve the behavior problem, you might already want to use stop() to prevent the bounce effects if the user inserts and removes the button very quickly):

 $("#button").hover(function(){ $("#info").stop(true,true).slideDown("fast"); }, function(){ //the handlerOut $("#info").stop(true,true).delay(1000).slideUp("fast"); }); 

Then, to get the desired behavior, we need to add a hover handler to #info , which stops the current animation, and then either displays or hides the information element, if necessary. Since we already have a handler that does this, you can simply add the #info selector to the hover call:

 $("#button, #info").hover(function(){ $("#info").stop(true,true).slideDown("fast"); }, function(){ //the handlerOut $("#info").stop(true,true).delay(1000).slideUp("fast"); }); 

Here's a working jsfiddle

Answer 2

A common solution to this problem is to set a delay before the related item also disappears, and if the user hovers that item during the delay, it completely cancels the hide.

 $("#button").hover(function(){ $("#info").slideDown("fast"); }, function(){ //the handlerOut $('#info').data('timeout', setTimeout(function(){ $("#info").slideUp("fast"); },1000) ); }); $('#info').hover(function(){ clearTimeout( $(this).data('timeout') ); // cancel the delayed code execution }, function(){ //the handlerOut $(this).data('timeout', setTimeout(function(){ $("#info").slideUp("fast"); },1000) ); }); 

Demo at http://jsfiddle.net/gaby/VjLM2/

Answer 3

http://jsfiddle.net/

 <a href="javasctipt:" class="hoverNav" target="info"> show info </a> <div id="info" class="hoverNavDescription"> Iam info text </div> var curVisible=""; jQuery(function(){ jQuery('.hoverNav').bind('mouseover',function(){ var elm=jQuery(this), targetName=elm.attr('target') ; curVisible=targetName; jQuery('#'+targetName).slideDown(); jQuery(window).bind('click',handleMouseOut) }); function handleMouseOut(e) { if($(e.target).attr('id')!=curVisible) { jQuery('#'+curVisible).slideUp(); curVisible=""; jQuery(window).unbind(handleMouseOut); } } 

});

 .hoverNavDescription { display:none; background-color:red; height:100px; width:100px; }