Can I delay The mouse-out function when using Jquery .hover()?

Question

I have a Text Box that is hidden until a div is hovered over. I am Using Jquery's hover function, and it works. But what I would like is to delay the mouse-out function for a few seconds before toggling closed. Here is my code.

// Pops out TxtBox in Left Column When Hovered then collapses after delay
$(".CollapsedLeft .LeftColumn .SearchHoverCatcher").hover(function() {
    $(".CollapsedLeft .LeftColumn .SearchHoverCatcher").addClass("Hovered");
}, function() {
$(".CollapsedLeft .LeftColumn .SearchHoverCatcher").delay(1000).removeClass("Hovered");
});

The above code Hides and shows the text box as desired but the 1000ms delay doesn't occur. Any Thoughts would be greatly appreciated.

Jquery Answers Please.

Gusher

Answer 1

delay() works with animations, not just arbitrary statements. You can use a setTimeout:

http://jsfiddle.net/p4b7P/

var hoverTimeout;
$('#theDiv').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('hovered');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('hovered');
    }, 1000);
});

Tailspin

Answer 2

You can use setTimeout function

var timer;
var delay = 1000;

$('#element').hover(function() {
    // on mouse in, start a timeout

    timer = setTimeout(function() {
        // do your stuff here
    }, delay);
}, function() {
    // on mouse out, cancel the timer
    clearTimeout(timer);
});

like this change your code accordingly

Delk