How do I add a 3 seconds delay to this function?

Question

This is a function for a toggle navigation and it stays open when page is loading. Can anyone help on how to add a delay to this function?

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

inanutshellus · Accepted Answer · 2014-07-16T03:51:30.337

3

Look into setTimeout. e.g. setTimeout(myFunction, 3000) will call myFunction in 3 seconds.

        $(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;
                });
        });

edited Jul 16 '14 at 03:51

answered Jul 16 '14 at 03:20

inanutshellus

9,683
9
53
71

dear @gabriel where did u mentioned 3 seconds – Ashok Rathod Jul 16 '14 at 03:24
Sorry, had a typo. Try it now. – inanutshellus Jul 16 '14 at 03:25
Tks a lot for replying, Gabriel. Actually the menu now is open for 3 seconds, and not closed. Any ideas where I'm getting things wrong here? – note00 Jul 16 '14 at 03:29
@note00 Ok, I've updated the answer. Assuming you want the menu items to go away, you could use the above. – inanutshellus Jul 16 '14 at 03:53
Many thanks for helping out. I'm using a responsive menu similar to this site http://www.starbucks.com/. So the problem is that when the page is loading, the drop down nav is open, and not closed as it should. So everytime I go to a page through a link within the site not navigating through the menu (for example, when using a button on the homepage linking to the contact page) I see for a few seconds the whole menu open. When I used the first setTimeout example you've sent, the menu was open for 3 seconds and then it closed. With this new code it stays open for a moment before closing. – note00 Jul 16 '14 at 04:30
I'm inserting the function in the head of the HTML witch makes it goes back to the closed state quickly. I'm trying to keep it closed until its actually clicked. Thanks in advance for any suggestions and for your help so far. – note00 Jul 16 '14 at 04:36
1

Thanks once again for your help, Gabriel. I was actually committing a silly mistake. The toggle menu was in the open state for a few seconds because I had the script at the bottom of the HTML page. Once I moved it to the head, it only flashes (open) before it goes to the closed state. I was looking for running the script before the page was loaded and not after 3 seconds as I said in the question. I suppose there's nothing I can do about this flashing between open and closed state when the page is loading on mobile devices. Sorry about that and many thanks a lot for your help. – note00 Jul 16 '14 at 21:23

score 1 · Answer 2 · answered Jul 16 '14 at 03:21

This is a simple way to do it without directly using setTimeout. Just use the jquery .delay() which works with .fadeIn(), since your body is already visible, it won't do anything, since it's already visible, but then after the delay it calls the fade in function, and then it calls the threeSecondDelayFunction which executes.

$(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();
    });

});

The same thing is happening with the code Gabriel posted above. The menu now is open for 3 seconds, and not closed. Any ideas where I'm getting things wrong here? — note00, Jul 16 '14 at 03:33
Tks for your help. As I said to Gabriel (in the answer above) I was actually committing a silly mistake. The toggle menu was in the open state for a few seconds because I had the script at the bottom of the HTML page. Once I moved it to the head, it only flashes (open) before it goes to the closed state. I was looking for running the script before the page was loaded and not after 3 seconds as I said in the question. Many tks. — note00, Jul 16 '14 at 21:27

How do I add a 3 seconds delay to this function?

2 Answers2