我可以延迟使用 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 毫秒的延迟。任何想法将不胜感激。

请问。

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

Answer 2

您可以使用 setTimeout 函数

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

像这样相应地更改您的代码