jQuery/JS setTimeout/clearTimeout

Question

I'm not super proficient at this, but I have a navigation item where on hover, a div with a search form slides down. Currently, when you mouseover, then mouseout, the div stays open until you click the close button.

I'm trying to make it so that when you mouseout the div slides backup after a few seconds, unless the user is on the div or nav link still (i.e., they're filling out the search form).

Here's what I have so far:

$("#services_link").mouseover(function() {
        $("#services_link").css('background-position','left -73px');
        $("#vendors_dropdown").slideDown(function() {
            setTimeout(HideMe, 4000);
        });
    });

    function HideMe() {
        $("#services_link").css('background-position','left 0');
        $("#vendors_dropdown").slideUp();
    }

That gets me as var as the div sliding down on hover of the link, and sliding up after 4 seconds (regardless of where the mouse cursor is). So I just need the div to stay open if the mouse cursor is on the link or div.

I've looked at 3 or 4 other similar questions (and answers) and none really quite do the trick. setTimeout (and clearTimeout) is kinda new to me, so please excuse the noob question. :)

score 1 · Accepted Answer · edited May 23 '17 at 12:04

Bind both mouseenter and mouseleave. You'll want to do the timeout on the mouseleave, but then reset it when/if the mouseenter happens again.

Try looking at just the selected answer here to see how to do what I'm talking about.

Something like this:

var timeout;
$("#services_link, #vendors_dropdown").mouseenter(function() {
    window.clearTimeout(timeout);
    $("#services_link").css('background-position','left -73px');
    $("#vendors_dropdown").slideDown();
}).mouseleave(function(){
    timeout = window.setTimeout(HideMe, 4000);
});

function HideMe() {
    $("#services_link").css('background-position','left 0');
    $("#vendors_dropdown").slideUp();
}

jQuery/JS setTimeout/clearTimeout

1 Answers1