Waiting x milliseconds after an event, recheck and trigger

Question

I currently have a jQuery.event listener, which once triggers will display an otherwise hidden element (a rollover, basically).

However, is there a way I can get jQuery to wait a few milliseconds, recheck to ensure the mouse is still over the element and then trigger the .show() event if it is?

I currently have:

$("#who-mousearea").mouseenter(function(){  
    $("a#who-edit").fadeIn();  
}).mouseleave(function(){  
    $("a#who-edit").fadeOut();  
});

I understand I could use setTimeout, however this would just delay the time it takes to fadeIn() the element.

Anyone have an idea on how to achieve this?

Answer 1

var timeout = null;

$("#who-mousearea").mouseenter(function(){
  timeout = setTimeout(function() {
    timeout = null;
    $("a#who-edit").fadeIn();
  }, 50);
}).mouseleave(function(){
  if (timeout == null) {
    $("a#who-edit").fadeOut();
  }
  else {
    clearTimeout(timeout);
  }
});

Answer 2

Clear timeout on mouse leave.