Question

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

由于this问题，我更接近了。

我遇到的问题是动画。它表现得非常奇怪。我已经在JsFiddle中模拟了我的代码来查看。

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

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

任何建议都会非常感激，因为我不确定我是否正确地做到这一点！

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

Answer 1

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

这可能不是您需要的解决方案，但它是更好的选择的修改
在这种情况下，您可以将导航的宽度（您在其上写入IsNear函数）设置为20px并在其上写入onhover而不是始终检查正文

Answer 2

我所做的是改变了方法。我在这个小提琴里做了一个事件捕手div：

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

并添加事件处理程序，当鼠标经过菜单动画时，当鼠标移出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毫秒的延迟检查我们是否适合真正的鼠标输出，如果没有什么都不做，如果是的话，隐藏隐藏菜单。

当鼠标靠近时jQuery动画

2 个答案: