Question

I’m building a menu control that consists of a header area and a content area that contains the links.

I’m hiding the content area initially and then calling SlideDown when I hover over the header and SlideUp when you leave the header. My problem is I want to keep the content area open if you are over it, as well.

<div id="header">Header</div>
<div id="content">Content</div>

$('#header').hover(FadeMenuIn, FadeMenuOut);

function FadeMenuIn(ID) {
    $('#content').stop(true, true).slideDown('slow');
}

function FadeMenuOut(ID) {
    $('#content').stop(true, true).slideUp('slow');
}

I’ve tried adding the same handlers to #content but it still slides the content up once I get about 20 px away from the header.

Demo: here

Answer 1

You can pull a bit of trickery here with a .delay() call, like this:

$('#header, #content').hover(FadeMenuIn, FadeMenuOut);

function FadeMenuIn(ID) {
  $('#content').stop(true, true).slideDown('slow');
}

function FadeMenuOut(ID) {
  $('#content').stop(true, true).delay(10).slideUp('slow');
}

See the updated demo here, what we’re doing is giving a slight delay to the .slideUp() (which goes on the queue), but when you go into the #content element you’re clearing that queue, so nothing slides up when the time comes, unless you’re outside of both elements.
​