1

我一直在寻找一种方法，使导航菜单在鼠标进入附近区域时从浏览器顶部向下滑动，并在鼠标离开菜单时消失。

感谢这个问题，我离得更近了。

我遇到的问题是动画。它的行为非常奇怪。我已经在 J​​sFiddle 中模拟了我的代码来看看。

http://jsfiddle.net/tVreF/2/

稍等片刻，在页面上移动鼠标，尝试调整窗口大小等，最终它会动画。显然这不是预期的方式。

任何建议将不胜感激，因为我不确定我是否以正确的方式去做！

编辑：只是为了消除任何混乱 - 我的意思是导航菜单最初不会出现，然后当鼠标靠近屏幕顶部时整个菜单本身会向下滑动。有点像将 Windows 任务栏设置为“自动隐藏”时发生的情况。

4

2 回答 2

1

http://sperling.com/examples/menuh/
试试这个。您可以使用纯 css 制作动画...？

这可能不是您需要的解决方案，但它是一个更好的替代
编辑
在这种情况下，您可以将导航的宽度（您在其上编写 IsNear 函数）设置为 20px 并在其上写入 onhover 而不是总是检查正文

于 2012-09-19T09:49:42.433 回答
1

我所做的是改变了方法。我在这个小提琴中制作了一个事件捕捉器 div：

http://jsfiddle.net/L2J5X/2/

并在鼠标移到菜单动画进入的 div 上时添加事件处理程序，当鼠标移出 div 菜单动画时。

function dothething(amover)
    {
    if(amover) 
        {
            $(".nav").animate({top: '0px'}, 200, "linear");    
        } 
        else
        {
            window.setTimeout(function(){if(!$amthere){
            $(".nav").animate({top: '-40px'}, 200, "linear");        
            }},100);
        }
    }
        $("#detect").mouseover(function(){dothething(true);});
        $("#detect").mouseout(function(){dothething(false);});
$("#mainNav").mouseover(function(){$amthere=true;});
$("#mainNav").mouseout(function(){$amthere=false;});
$amthere = false;
​

div 绝对定位在顶部 z-index 上，因此事件总是被捕获。无论其他 div 在随机放置时会做什么（请参见绿色大块）。

希望这个对你有帮助。

* 编辑 *

添加了一个短暂的延迟，以防止从捕手 div 到菜单时隐藏。这就是 $amthere 变量的作用，看看我们是否在菜单上。然后用 100 毫秒的延迟检查我们是否可以进行真正的鼠标操作，如果不是什么也不做，如果可以，隐藏隐藏菜单。

于 2012-09-19T10:02:27.613 回答