Question

I am trying to make my menu bar partially hide after a timeout of about 5 seconds of inactivity. The menu is positioned 20px from the top of the page and the basic idea is that a small section of the menu will still be visible once it has moved up to allow the user to hover over this for it to drop down again (hopefully this makes sense!).

I have managed the animation side but not quite the timeout.
Any ideas?

Answer 1

Unfortunately jQuery doesn’t have a delay function. However, you can use a sneaky and not-too-dirty hack to simulate a delay, by animating the opacity of an element from 1 to 1:

$('#visibleElement')               // Assuming the element is already shown
  .animate({opacity: 1.0}, 3000);  // do nothing for 3 seconds

So to slide up your menu 5 seconds after the mouse leaves you could do the following:

$('#menuDiv').mouseout(function(){
  .animate({opacity: 1.0}, 5000)
  .animate( slide up etc...
});