Question

I have two neighbouring elements $("#video") and $("#progress").

I would like a third element $("#time") to be shown using fadeIn when the mouse enters either one of these elements, and hidden again using fadeOut when the mouse leaves the element. I can get this to work, but there is a small issue.

Whenever the mouse enters one of either elements, coming out of the other, the $("#time") element first gets hidden and than shown again, while I would like it to be shown always.

This jsfiddle demonstrates the issue more clearly.

How can this be fixed?

Note that the elements, although close to each other in the webpage, are actually pretty separated in the code, so it is not possible to put them all together in one big div and put the hover on that div.

Answer 1

You can use the setTimeout method for your Fade Out code and with a variable find out that if you should hide that or not.

var ShouldBeShown = false;    
$(".hover").hover(fIN, function(){
  ShouldBeShown = false;
  setTimeout(fOUT, 50);
});
function fIN() {
  ShouldBeShown = true;
  $("#time").fadeIn(300);
}
function fOUT() {
  if(!ShouldBeShown)
    $("#time").fadeOut(300);
}

http://jsfiddle.net/EyFdn/1/