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

您可以使用悬停和延迟：

$("#thumbs div").hover(function() {
    $(this).delay(1000).queue(function(){
        $(this).addClass('hovered').siblings().removeClass('hovered');
    });
},function() {
    $(this).finish();
});

Answer 3

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