jquery - 使用 Jquery .hover() 时可以延迟鼠标移出功能吗？

Question

我有一个隐藏的文本框，直到将鼠标悬停在 div 上为止。我正在使用 Jquery 的悬停功能，并且它有效。但我想要的是在切换关闭之前将鼠标移出功能延迟几秒钟。这是我的代码。

// 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");
});

上面的代码根据需要隐藏和显示文本框，但不会出现 1000 毫秒的延迟。任何想法将不胜感激。

Jquery 请回答。

Answer 1

delay() 适用于动画，而不仅仅是任意语句。您可以使用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);
});