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 に答える