Question

只有在鼠标在元素上悬停1秒后才能触发鼠标悬停事件吗？

$("img").mouseover(function () {

 $(this).animate( {opacity:1}, 200);

});

Answer 1

http://jsfiddle.net/tqa2J/1/

$("img").on("mouseover mouseout", function() {
    var tid = 0;
    return function(e) {
        var elem = $(this);
        clearTimeout(tid);
        if (e.type == "mouseover") {
            tid = setTimeout(function() {
                elem.stop(true).animate({
                    opacity: 1
                }, 200);
            }, 1000);
        }
        else {
            console.log(elem);
            elem.stop(true).animate({
                opacity: 0.3
            }, 200);
        }

    };
}());

Answer 2

您可以使用此处的hoverIntent（）jQuery插件：http://cherne.net/brian/resources/jquery.hoverIntent.html

另外，请确保在使用这些东西时要小心，因为它们不适用于移动浏览器或任何使用触摸屏的东西。

Answer 3

$("img").mouseover(function () {
    $(this).delay(1000).animate( {opacity:1}, 200);
}).mouseleave(function() {
    $(this).clearQueue().stop().animate({opacity:0.2},200);
});

DEMO

Answer 4

你应该使用setTimeOut函数。

setTimeOut(function(){$("img").mouseover(function () {

        $(this).animate( {opacity:1}, 200);

});
},1000);

需要时间，以毫秒为单位。

Answer 5

您可以创建一个计时器功能（参见[1]），以便稍后处理您的事件。您可以将该函数存储在数组中或直接存储到“窗口”，以便在计时器功能触发之前发生“mouseout”时将其取消。

[1] http://www.w3schools.com/js/js_timing.asp

jQuery鼠标悬停与时间

5 个答案: