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

【问题标题】：Can I delay The mouse-out function when using Jquery .hover()?使用 Jquery .hover() 时可以延迟鼠标移出功能吗？
【发布时间】：2013-10-30 21:59:22
【问题描述】：

我有一个隐藏的文本框，直到一个 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 回答请。

【问题讨论】：

标签： jquery jquery-hover

【解决方案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);
});

【讨论】：

【解决方案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);
});

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

【讨论】：