JQuery mouseout timeout

Question

Similar problems have been dealt with before but I believe mine's slightly different owing to the use of the bind() function. Anyhow...

$('.overlay').bind("mouseenter",function(){
  $(this).fadeTo('slow', 0);
}).bind("mouseleave",function(){       
  setTimeout(function() { 
    $(this).fadeTo('slow', 1);
  }, 2000);
});

I want to fade out the overlay on "mouseenter", but only fade it back in 2000ms after "mouseleave".

I have an additional question: When the .overlay div fades out, I need to be able to click on what's beneath it i.e. I need the div to disappear completely or move down the z-index stack. However, if I try adding this in, the script thinks the mouse has left the .overlay div, so the .overlay fades back in.

For the same reason I can't use fadeOut() and fadeIn().

Answer 1

When the timeout fires this won't be what you expect. You can create a closure like this:

            $('.overlay').bind("mouseenter",function(){
                    $(this).fadeTo('slow', 0);
                    }).bind("mouseleave",function(){
                    var $this = $(this);                               
                    setTimeout(function() { 
                            $this.fadeTo('slow', 1);
                            }, 2000);
            });