Question

您好我是jQuery的新手，我希望在一段时间之后将导航菜单从页面顶部滑出。可能是用户在页面上大约3/4秒。我可能会添加一个箭头按钮，在菜单滑出页面后关闭菜单但是暂时我只需要知道如何上下滑动它。我想我可能需要修改我的CSS才能使这项工作成功。

我们非常感谢任何有关提示的帮助。

详情请见jsFiddle：http://jsfiddle.net/headex/tJNXD/

Answer 1

我会这样做：

首先，我在这里使用$(nav)选择器，但您可以先将其调整到您的代码中。此外，您需要输入您的菜单：position: relative;或position: absolute;

要将其滑出：

$(nav).animate({"top":$(nav).height() * -1},"slow");

要进入幻灯片：

$(nav).animate({"top":0},"slow");

如果您想在3秒后弹出，请转到：

function MenuOut()
{
     /* The sample code I put on top */
     $(nav).animate({"top":$(nav).height() * -1},"slow");
}

你把它放在你的Js页面上：

/* This will run once the document is ready */
$(function()
{
    setTimeout("MenuOut",3000); /* 3000 represent 3000 milliseconds, so 3 seconds */
});

现在按钮：

function MenuIn()
{
    $(nav).animate({"top":0},"slow");
}

然后将它绑定到您的按钮，如下所示：

$('#theButton').on(
{
    click: function()
    {   
        /* Hide the button, and then show up the menu */
        $(this).animate({"top":$(this).height() * -1},"slow",function()
        {
            /* I putted this in a callback function, so the 2 animations will be one after the other, not at the same time ! */
            MenuIn();
        });
    }
});

Answer 2

首先，在你加载的jsfiddle链接中，你没有加载你正在加载Mootools的jquery。所以你想要使用jQuery是正确的吗？

如果是这样，你可以使用这样的东西......

var timeout = null;

$('#masterNav').hover(function() {
    clearTimeout(timeout);
}, function() {
    timeout = setTimeout('$("#nav").slideUp(500)', 750);
});

从页面顶部滑动导航菜单 - Jquery

2 个答案: