Question

这是一个切换导航的功能，它在页面加载时保持打开状态。任何人都可以帮忙解决如何为此功能添加延迟的问题吗？

$(document).ready(function () {
    $('body').addClass('js');
    var $menu = $('#menu'),
        $menulink = $('.menu-link');
    $menulink.click(function () {
        $menulink.toggleClass('active');
        $menu.toggleClass('active');
        return false;
    });
});

Answer 1

查看setTimeout。例如setTimeout(myFunction, 3000)将在3秒内致电myFunction。

        $(document).ready(function() {
                $('body').addClass('js');
                var $menu = $('#menu'),
                    $menulink = $('.menu-link');
                $menulink.click(function() {
                    $menulink.toggleClass('active');
                    $menu.toggleClass('active');

                    // If I'm understanding the question correctly, 
                    // you want the menu to go away after 3 seconds
                    setTimeout(function() {
                        $menulink.toggleClass('active', false);
                        $menu.toggleClass('active', false);
                    }, 3000);
                    return false;
                });
        });

Answer 2

这是一种简单的方法，无需直接使用setTimeout。只需使用与.delay()一起使用的jquery .fadeIn()，因为你的身体已经可见，它不会做任何事情，因为它已经可见，但是在延迟之后它会调用淡入功能，并且然后它调用执行的threeSecondDelayFunction。

$(document).ready(function() {

    function threeSecondDelayFunction() {
        $('body').addClass('js');
        var $menu = $('#menu'),
        $menulink = $('.menu-link');
        $menulink.click(function() {
            $menulink.toggleClass('active');
            $menu.toggleClass('active');
            return false;
        });
    }

    $('body').delay(3000).fadeIn(0, function() { // delays for 3 seconds which is equal to 3000 miliseconds , then calls the fadeIn function which doesn't do anything in itself, but we call the function that includes the code you want delayed after the delay and fadeIn functions complete
        threeSecondDelayFunction();
    });

});

如何为此功能添加3秒延迟？

2 个答案: