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