How to add a delay to a jQuery fadeout?

Question

I'm designing a navigation bar for a site, and I'm trying to noodle out how to get the submenu that appears with each tab to stay visible after the cursor leaves the tab. Since it fades out immediately after the cursor leaves, I can't set a function on the submenu. So what I'm trying to do is introduce a setTimeout() to the out side of the .hover in jQuery, without success. Here's the code:

$('.hovernav').hover(
     function () {
         $(this).css('background-image', $(this).css('background-image').replace("_o.", "_i."));
      tabShowSubnav($(this).attr('id'));
     }, 
     function () {
         $(this).css('background-image', $(this).css('background-image').replace("_i.", "_o."));
      setTimeout('tabHideSubnav($(this).attr("id"))','2000');
     });

What am I missing about this setup?

Answer 1

Have you tried to have it show() on hover, then fadeOut('slow') on mouseout?

http://docs.jquery.com/Effects/fadeOut

Alternatly, you could .animate({opacity: 0}, 3000) or w/e amount would work for you.

One more edit:

you can have .animate({opacity: 1}, 3000) which would simply delay an already visible element for 3 seconds.

Taken from: http://www.learningjquery.com/2007/01/effect-delay-trick

Here is a simple snippet:

JQuery

    $(function(){
     $("#HeaderMenu").mouseover(function(){           
       $("#SubMenu").show();
         });
        $("#HeaderMenu").mouseout(function(){
             $("#SubMenu").animate({opacity: 1}, 3000, function(){$(this).hide()});
 });

Answer 2

Just taking a guess here, but maybe "this" is out of scope when the function gets called.

Answer 3

function () {
    ....
    setTimeout('tabHideSubnav($(this).attr("id"))','2000');
}

‘this’ in the inner function is set to the obect the timeout was called on, which is window, not the current instance of hovernav.

Best not to use a string with setTimeout; use a function instead. Then you get access to variables in the enclosing scope, which you can use to remember the this value that was passed to the outer function.

function() {
    ...
    var thisid= this.id;
    setTimeout(function() {
        tabHideSubnav(thisid);
    }, 2000);
}

(As a bonus, this stops JavaScript from having to recompile the function from your string every time. Putting code in strings is almost always bogus.)

Note you will probably need some more logic to cancel the hide-subnav if the mouse goes back into the hovernav. Otherwise instead of an annoying menu bar that keeps closing when the mouse leaves, you've got an even more annoying menu bar that keeps closing the menu even whilst you're hovering it, if you mousedout two seconds ago.