javascript - 带有计时的jQuery鼠标悬停

Question

有没有办法仅在鼠标在元素上悬停 1 秒后触发 mouseover 事件？

$("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);
});​

演示

Answer 4

您应该使用 setTimeOut 函数。

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

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

});
},1000);

它需要以毫秒为单位的时间。

Answer 5

您可以创建一个计时器函数（参见 [1]），在 1 秒后处理您的事件。您可以将该函数存储在数组中或直接存储到“窗口”中，如果在定时器函数触发之前发生“鼠标退出”，则可以取消它。

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