How to set up a "settimeout" properly for a jQuery function?

Question

Hello everybody, I hope I can get some help. I'm new to Jquery and JavaScript and I got stuck with a "setTimeout" function. I'm working on my navigation bar and basically I need a div(sub menu) to fade in when "click" on an anchor tag, fade it out if you move the mouse to a different navigation link and hide it all together if the mouse leaves it: like so:

1. show on click but hide it after a couple of seconds

2. hide if after the mouse leaves the div.

This is what I've got so far:

$("a").click(function() {
    $("#sub_nav").fadeIn(400);
});

$("#sub_nav").mouseleave(function() {
    $(this).fadeOut(0);
});

$("#sub_nav").mouseenter(function() {
    if(this) {
        $(this).show(0);
    } else {
        setTimeout(function() {
            $(this).fadeOut(0);
        }, 2000);
    };
});

It works as expected except for the setTimeout.

Appreciate all the help I can get.

Answer 1

$("#sub_nav").mouseenter(function() {
    if ( !$(this).is(':animated') ) {
        var el = this;
        setTimeout(function() {
            $(el).fadeOut(0);
        }, 2000);
    }
});

'this' inside the scope of the function fed is the 'window' object, you need to save the reference to the element.

I removed your if(this) because it would always evaluate to true and I wasn't sure if you were debugging, but you can probably use this as an example if it isn't the correct solution.