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

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

像这样相应地改变你的代码

使用Jquery .hover（）时可以延迟鼠标输出功能吗？

2 个答案: