6

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

4

2 回答 2

16

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);
});
于 2013-10-30T22:06:05.877 回答
1

您可以使用 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);
});

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

于 2013-10-30T22:07:00.777 回答