jQuery hoverIntent “hoverOut” function not being applied

Question

I've recently run into an issue that no amount of online searching seems to help unravel - particularly, when using the jQuery hoverIntent plugin, the initial "hoverIn" function is called correctly, but the "hoverOut" is not be applied.

As quick background, I'm using this on a menu created from an unordered list, with jQuery's .slideDown() effect used in the "hoverIn" and .slideUp() use in the "hoverOut" functions. The initial .slideDown() works, but when the cursor leaves the area, instead of .slideUp() being applied the element just vanishes instantly. Likewise, any subsequent mouseover/mouseout events don't trigger either "hoverIn" or "hoverOut" functions - a complete page refresh is needed to get even that initial "hoverIn" function to be applied.

I've tried a number of different jQuery animation effects, including .fadeIn(), .fadeOut(), .show(), animate(), etc. - all without success. I've also come across this problem before a number of times in the past, and I'm wondering what could possibly be causing it.

Here is the hoverIntent code I'm using:

var ddMainMenuConfig = {  
over: revealMainMenuChildren, // function = onMouseOver callback (REQUIRED)    
timeout: 700, // number = milliseconds delay before onMouseOut    
out: hideMainMenuChildren
};

function revealMainMenuChildren(){ $(this).find("ul").filter(":first").stop().slideDown(300); }

function hideMainMenuChildren(){ $(this).find("ul").filter(":first").stop().slideUp(500); }

$("#menu ul ul").parent().addClass("ddarrow").append("<span class=\"childIndicator\"></span>");
$("#menu ul ul").css({display: "none"}); // Opera Fix
$("#menu ul li").hoverIntent(ddMainMenuConfig);

Just in case you'd like to see a test page where this is happening, here's a link:

http://test.nimblehost.com/dexture/

Would appreciate any suggestions on why this is happening, and how to fix it. I'm using jQuery v1.7.x, served via the Google CDN, and r6 of hoverIntent.

Answer 1

For those who may have run into the same problem and found this page through searching, I was finally able to discover the cause - my own CSS code for the menu was the culprit.

More specifically, I had styled the menu so that it worked as a drop down menu with pure CSS, for visitors who might have javascript disabled. This styling was apparently the source of conflict, as removing the two lines of CSS code that controlled the hover/hide styles allowed the hoverIntent plugin to work as expected.

For reference, here are the two lines of CSS code that, once removed, allowed the hover functions to properly work:

/* Hide Drop Down Menu Items */
#menu ul li:hover ul, #menu ul li:hover ul ul, #menu ul li:hover ul ul ul, #menu ul li:hover ul ul ul ul, #menu ul li:hover ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul ul ul ul {display: none;}

/* Show on Hover */
#menu ul li:hover ul, #menu ul li li:hover ul, #menu ul li li li:hover ul, #menu ul li li li li:hover ul, #menu ul li li li li li:hover ul, #menu ul li li li li li li:hover ul, #menu ul li li li li li li li:hover ul, #menu ul li li li li li li li li:hover ul, #menu ul li li li li li li li li li:hover ul {display: block;}

Answer 2

When I hover over your menus, I don't feel the 700ms delay or see the animation but the menus do open. Is it possible that you have other code in play that is preventing hoverIntent from opening and closing the menus? Try adding a debug statement into your hover functions, like console.log("foo") or an alert("foo"), to make sure they are getting called properly.

I know this isn't much of an answer, but I would try to strip down your page to only the most basic HTML and JavaScript and then build it back up once you get things working.

Answer 3

It's hard to debug this without having a real test environment but here's some things that I would do.

Try using or remove stop() altogether:

$(this).find("ul").filter(":first").stop(true, true)...

This line below,

$("#menu ul ul").parent().addClass("ddarrow")

Should be (notice the 2 ul's above). This goes to the other 2 similar selectors.

$("#menu ul li").parent().addClass("ddarrow")

I think that if you change those things above, you'll be closer to fixing your issues.

You also might want to look at this demo for inspiration as this is similar to what you're doing. It's using jQuery easing as well which is pretty cool IMO.

naviDropDown

Answer 4

instead of using stop, i'd put a setTimeout function inside of the hover function along with a console.log() statement so that way you can verify thats working.

Also, make sure your selectors are working properly