jquery - マウスが 1 秒以上ホバリングしている場合にのみ関数を実行する

Question

ユーザーが要素の上にカーソルを置いたときに、要素のクラスを追加および削除したいと思いますが、たとえば、カーソルが 1 秒以上その上にある場合に限ります。どうすればこれを達成できますか？

$("#thumbs div").mouseenter(function() {
    $('#thumbs div').removeClass('hovered');
    $(this).addClass('hovered');
});

Answer 1

タイマーを使用します。

var timer;
$("#thumbs div").mouseenter(function() {
    var that = this;
    timer = setTimeout(function(){
        $('#thumbs div').removeClass('hovered');
        $(that).addClass('hovered');
    }, 1000);
}).mouseleave(function() {
    clearTimeout(timer);
});

http://jsfiddle.net/qGRcH/

Answer 2

http://jsfiddle.net/bSuuy/2/

var timer;

$("button").on("mouseenter", function() {
    timer = setTimeout(function() {
        $(".box").css("background", "blue");
    }, 1000);
});

$("button").on("mouseout", function() {
    $(".box").css("background", "red");
    clearTimeout(timer);
});