Delay a hover affect

[noahgelman]

I have a div appear on hover, like a drop down. However I want to delay the appearance of that div for a second first, how would I do that?

[mrking]

This help?

http://snipplr.com/view/4163/highlight-menu-on-hover-with-delay-and-display-submenu/

[tbwcf]

$('#element').hover(function(){

$('#dropdown').delay(1000).fadeIn('slow');

});

If I’ve understood the question properly the above should work.. using jQuery just use the .delay() function.

[noahgelman]

Hmmm… @tbwcf, that’s close. There’s a small detail I forgot to mention. If when the delay is over, if the mouse isn’t still over the element that’s activates the hover, I dont want the hover to activate.

That way if the user’s mouse accidentally goes over the element for a split second, the div wont randomly appear a second or 2 later. I want them to have to hold it over the element.

[noahgelman]

Okay, this is what I have so far, but it’s not working. Basically, when .select-dropdown is hovered, it gets a ready class. That works fine. Then I try to say that when you hover it, wait 1 second, and if it has the ready class still, show .select-options, but it’s not working. Something is wrong with my if statement.

$('.select-dropdown').hover(

function () {

$(this).addClass('ready');

},

function () {

$(this).removeClass('ready');

}

);

$('.select-dropdown').hover(

function () {

$(this).delay(1000, function() {

if ($(this).hasClass('ready'))

{

$(this).children('.select-options').fadeIn(1);

}

});

},

function () {

$(this).children('.select-options').delay(100).fadeOut();

}

);

[noahgelman]

I found the exact plugin to do what I wanted.
http://cherne.net/brian/resources/jquery.hoverIntent.html

[Author]

Posts