Javascript Jquery：使菜单在几秒钟后自动滑出到一侧

下面的代码是这样做的：访问者点击菜单，它从左侧水平滑入。访客再次点击菜单，它滑出（关闭）

我想要的是：同样的行为。而且：若菜单是打开的，而访问者并没有点击任何地方，菜单会在5秒钟后滑出（关闭）

谢谢你的帮助

var clicked = 0;
function header() {
$('#header').click(
    function(){
            if(clicked === 0){
                $(this).stop().animate({ paddingLeft: '230px'}, {queue: false, duration: 400 });
                clicked = 1;
            } else if(clicked === 1){
                $(this).stop().animate({ paddingLeft: '0'});  
                clicked = 0;
            }
        }
);
}

使用以下功能：

setTimeout(function() {
    // your animation
}, 2000);

您的整个代码最终应如下所示：

// You use the "clicked" variable to check if the menu is already active or not
var clicked = false;

// You can delete the "function header()" part because it's unnecessary

// Here we add "click" event when the visitor clicks the header
$('#header').click(function(){

    // Check if menu is already active
    if(clicked == false){
        // If not: animate menu and make active (*see below for more info)
        $(this).stop().animate({ paddingLeft: '230px'}, {queue: false, duration: 400 });
        clicked = true;

    } else {
        // If yes: animate menu back to normal and make inactive
        $(this).stop().animate({ paddingLeft: '0'});  
        clicked = false;
    }
});

// Set header to automatically animate to active after 2000 milliseconds
setTimeout(function() {
    $("#header").stop().animate({ paddingLeft: '230px'}, {queue: false, duration: 400 });
    clicked = true;
}, 2000);

---

我还为您当前的代码添加了解释。有关

.animate（）

函数的更多信息，请参见此处：

您为什么要这样做？如果我（一个用户）想慢慢地阅读菜单中的项目，而3秒钟是不够的，我不希望菜单关闭@第二，菜单不是很长。实际上它很短：只有5个项目（链接）。这是我网站导航的手机版。我不知道如何创建或实现具有滑动行为的菜单。所以我只有这个点击行为。一些访问者可能会打开菜单，但随后决定在当前页面上停留更长时间，但不知道他们必须再次单击菜单才能将其滑出。然后菜单将自动关闭。@BossaNova您不能为我选择阅读5个链接需要多长时间。如果我是盲人，我使用的屏幕阅读器耗时太长怎么办？不要强迫用户体验不好，因为你不知道如何实现更好的用户体验。如果你想弄清楚如何打开和关闭按钮，这里有一个很好的例子：@SecondRikudo我想你是对的。我只是没有想到这种可能性。我一定要试试。尽管如此，我还是很想知道如何使菜单自动滑出。谢谢，Dark，但是在上面的代码中我应该将setTimeout函数放在哪里，因为我尝试了很多方法，但都不起作用。只需在当前代码之前或之后添加它即可。不是在另一个函数中。好的，我在当前代码之后添加它，不做任何更改。我只是不清楚到底应该用什么来代替“你的动画”。。。。。使用动画代码，请查看我的更新答案。你应该真正理解你正在使用的代码，而不是在不知道它的功能的情况下从某个地方复制粘贴它。