jQuery hoverIntent子菜单在从子菜单移动到主菜单时消失 [英] jQuery hoverIntent submenu fades on move from submenu to main menu

问题描述

我尝试创建一个子菜单：

• 在为用户友好性再次隐藏之前延迟1秒（无意失去焦点） li>
  
• 淡出，所以很明显它会在重新进入时停止淡入淡出。

我介绍了hoverIntent的用法。

现在正在使用下面的代码（jQuery的版本应该是最新的，否则fadeIn不起作用）：

$（document）.ready（function（）{

<$ p $ （）;

$（＃speciesSubmenu）。stop（true，false）.fadeIn（500）.show（）;
}

函数hideMenu（）{
$（＃speciesSubmenu）。fadeOut（1000,0）;
}

$（＃menuItemSoorten）。hoverIntent （{
over：showMenu，
timeout：800，
out：hideMenu
}）;

}）;

http://jsfiddle.net/johan这是解决方案： .net / p8PDW / 6rel =nofollow> http://jsfiddle.net/p8PDW/6

（opacity，1）。

  $（＃speciesSubmenu）。 。显示（）; 
  

这是变化。
和stop（）阅读这篇文章 http://api.jquery.com/stop/ 它会帮助你很多

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/

解决方案

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

这篇关于jQuery hoverIntent子菜单在从子菜单移动到主菜单时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！