Question

I have a piece of code that hides an element on mouseout.

The code looks like this:

var myMouseOutFunction = function (event) {

    setTimeout(function () {

    $(".classToHide").hide();

    $(".classToShow").show();

    }, 200);

};

This produces a result very close to what I want to do. However, I want to wait the time on the timeout (in this case 200 ms) then check to see if my mouse is still “out” of the element. If it is, I want to do .hide() and .show() on the desired elements.

I want to do this because if a user slightly mouses out then quickly mouses back in, I don’t want the elements to flicker (meaning: hide then show real quick) when the user just wants to see the element.

Answer 1

Detailing Kolink answer

DEMO: http://jsfiddle.net/EpMQ2/1/

var timer = null;
element.onmouseout = function () {
    timer = setTimeout(function () {
      $(".classToHide").hide();
      $(".classToShow").show();
    }, 200);
}

element.onmouseover = function () {
    clearTimeout(timer);
}