我构建了一个简单的下拉菜单。
代码和演示在这里：http://jsfiddle.net/3Lq2d/5/
它看起来像这样：
将鼠标悬停在MENU 1 上会淡出子菜单。
它工作得很好，除非你碰巧是个笨蛋，在菜单上频繁地晃动鼠标，在这种情况下，它会陷入半透明状态。
使用 .stop(true,true) 修复了 spaz 问题，但删除了将鼠标从菜单向下移动到子菜单的功能。我使用 fadeIn/fadeOut 来提供轻微的延迟，因此当鼠标从菜单移动到子菜单时，子菜单保持可见...... stop(true,true) 打破了这一点。
在所有正确的位置构建具有轻微延迟的淡入淡出菜单的最佳方法是什么？
更新：
我一直在修改直到完全满意，为悬停意图添加延迟......这是最终代码： http://jsfiddle .net/3Lq2d/75/
I've built a simple dropdown menu.
The code and demo is here: http://jsfiddle.net/3Lq2d/5/
It looks like this:
Mousing over MENU 1 fades in the Submenus.
It works great, unless you happen to be a spaz and jiggle your mouse around a lot over the menu, in which case it gets stuck in a semi-transparent state.
Using .stop(true,true) fixes the spaz issue, but removes the ability to mouse down from the menu to the submenu. I am using fadeIn/fadeOut to give a slight delay, so when the mouse moves from the menu to the submenu, the submenu stays visible ... stop(true,true) breaks this.
What's the best way to build a fading menu with a slight delay in all the right places?
UPDATE:
I tinkered until total satisfaction, adding delays for hoverintent ... here's the final code: http://jsfiddle.net/3Lq2d/75/
发布评论
评论（1）
删除两个
return false;，我相信这是你的问题。 http://jsfiddle.net/3Lq2d/3/另外，我建议您使用无序列表这代替了 div，它更有意义，并且会给你带来更少的麻烦。
看看我不久前写的这个教程 http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/
Remove both
return false;, I believe this is your problem. http://jsfiddle.net/3Lq2d/3/Also, I suggest you use an unordered list for this instead of divs, it makes more sense and it'll give you less headaches.
Take a look at this tutorial I wrote a while ago http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/