带有计时的jQuery鼠标悬停答案

【问题标题】：jQuery mouseover with timing带有计时的jQuery鼠标悬停
【发布时间】：2012-06-20 17:04:57
【问题描述】：

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

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

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

});

【问题讨论】：

你可能想看看cherne.net/brian/resources/jquery.hoverIntent.html
查看以下链接Tricky delay on mouseover

标签： javascript jquery css

【解决方案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);
        }

    };
}());

【讨论】：

应该注意：hoverIntent 是 ~1.5kb 的代码（缩小）这个解决方案就像 0.01kb 一样。
@rlemon 这也有内置的调试模块console.log(elem);

【解决方案2】：

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

DEMO

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你应该使用 setTimeOut 函数。

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

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

});
},1000);

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

【讨论】：

【解决方案5】：

您可以使用在此处找到的 hoverIntent() jQuery 插件：http://cherne.net/brian/resources/jquery.hoverIntent.html

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

【讨论】：

是的，除非触摸屏应用程序具有内置鼠标指针或可以检测为悬停事件的等效项。