j查询鼠标悬停与计时

jQuery mouseover with timing

本文关键字：悬停 查询 鼠标      更新时间：2023-09-26

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

$("img").mouseover(function () {
 $(this).animate( {opacity:1}, 200);
});

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（） jQuery 插件： http://cherne.net/brian/resources/jquery.hoverIntent.html

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

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

演示

你应该使用 setTimeOut 函数。

setTimeOut(function(){$("img").mouseover(function () {
        $(this).animate( {opacity:1}, 200);
});
},1000);

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

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

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

相关文章：