CODEWITHSUNDEEP
javascriptjqueryhoverintent
jasenmp
jasenmp

Reputation: 319

Hoverintent/Hover Delay jQuery

Hi all I'm trying to accomplish a few things.

I have an element that is displayed one mouse over, it's essentially a submenu but it is not structured like your traditional submenu would be in that it is no within an 'li' element. What I'm attempting to do is when a user hovers over 'products' the subnav is displayed - this works without issue. However when the user moves their mouse from 'products' to the subnav menu itself I want the submenu to remain and not disappear until both elements (a#products and #banner-top) no longer have a mouseover.

I'm currently using hoverintent to accomplish this because it sounded like it would suit my purposes. I was under the impression the 'out' would not be called just so long as the user remained hovering over one of the elements that the .hoverintent is attached to. I also assumed that the 'out' would not trigger even if the user hovers off the initial element that triggered the '#product-sub-nav' to display just so long as they did it in a short period of time. In other words, the user hovers over 'products' the submenu displays then the user hovers over the submenu in a short period of time thus not triggering the function that attaches a 'hidden' class to the subnav to hide it again. I hope I've done a decent job of explaining what I'm trying to do.

Here is my code

    var settings = {
                sensitivity: 4,
                interval: 75,
                timeout: 500,
                over: mousein_trigger,
                out: mouseout_trigger
            };

            jQuery('.item-134 a, #product-sub-nav').hoverIntent(settings);

            function mousein_trigger() {
                jQuery('#banner-top').removeClass('hidden')
            }
            function mouseout_trigger() {
                jQuery('#banner-top').addClass('hidden')
            }

UPDATE W/ JS FIDDLE

http://jsfiddle.net/M5BN2/

Upvotes: 0

Views: 2666

Answers (1)

jasenmp
jasenmp

Reputation: 319

I just wanted to update this in case someone else had a similar issue. This solution works perfectly: https://stackoverflow.com/a/1670561/1108360

jQuery(".item-134 a, #banner-top").mouseenter(function() { //if mouse is over 'products' link or submenu
                //clear timeout
                clearTimeout(jQuery(this).data('timeoutId'));
                //display sub menu
                jQuery('#banner-top').removeClass('hidden');
            }).mouseleave(function() { //when mouse leaves element
                timeoutId = setTimeout(function() {
                    //delay hiding sub menu
                    jQuery('#banner-top').addClass('hidden');
                }, 650);
                //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
                jQuery(".item-134 a, #banner-top").data('timeoutId', timeoutId);
            });

Didn't properly update JSfiddle: http://jsfiddle.net/M5BN2/5/

Upvotes: 1

Related Questions