jQuery hoverIntent submenu fades on move from submenu to main menu

问题

I try to create a submenu that:

• delays 1 second before it hides again for userfriendlyness (unintended loss of focus)
• fades out, so it's clear it going
• on re-entry stops the fading and fades back in

I introduced the use of hoverIntent.

It is working now with the following code (version of jQuery should be the latest, otherwise fadeIn does not work):

$(document).ready(function(){

function showMenu() {
    $("#speciesSubmenu").stop(true,false).fadeIn(500).show();
}

function hideMenu() {
    $("#speciesSubmenu").fadeOut(1000,0);
}

$("#menuItemSoorten").hoverIntent({
    over: showMenu,
    timeout: 800,
    out: hideMenu
});

});

http://jsfiddle.net/johannesklapwijk/p8PDW/15/

回答1:

The set time Out is going to run and fadeOut as soon as the mouseout event fires. Firstly you should switch to using the .on() method with the mouseenter / mouseleave events, and to really create the behavior you're after you'll want to use the hoverintent plugin available here

https://github.com/briancherne/jquery-hoverIntent

回答2:

Here is the solution: http://jsfiddle.net/p8PDW/6

The stop in the handler in method is making the problem

$("#speciesSubmenu").stop().css("opacity", "1").show();

This is the change. and for the stop() read this article http://api.jquery.com/stop/ it will help you a lot

来源：https://stackoverflow.com/questions/19087566/jquery-hoverintent-submenu-fades-on-move-from-submenu-to-main-menu