How to interrupt a Hover's handlerOut

Question

I have the following situation:

I have an object, lets call it "Button". When you mouese over Button it make another object "Info" slide down. Of course, when your mouse leaves Button, Info slides up and dissapear. But, Info has a link and the user might want to click it. I can delay the Info's slide up but I can't stop it after I reach 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 Button not to slideUp Info after I hover it?

Answer 1

You can use stop() to stop any currently queued animation. Note that stop() stops any currently running animation wherever it currently is, so in this case we'll need to stop the animation and show the element.

(As an aside, before solving the behaviour issue, you might already want to use stop() to prevent bouncing effects if the user mouses in and out of 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 behaviour you want, we need to add a hover handler to #info that stops the current animation, and then either shows or hides the info element, as appropriate. Since we've already got a handler that does that, you can just 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

The usual solution to this problem, is to set a delay before the related element hides as well, and if the user hovers that element during the delay, to cancel the hiding completely.

$("#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;
}