Question

下面我写了一个悬停元素的函数。我希望只有当鼠标处于2秒或更长时间的那一部分时才会执行此功能。当它们会减少或根本不减少时，就不会这样做。

在我写的代码下面：

$(function(){
    $('section.zespol_list ul li a').hover(function(){
        $(this).next().fadeIn(1000);
    },
    function(){
        $(this).next().fadeOut(1000);
    });
});

Answer 1

您可以使用setTimeout来延迟执行，并且在该时间内如果发出mouseout，则使用clearTimeout清除计时器。

$(function(){
    var timeOutId;
    $('section.zespol_list ul li a').hover(function(){
        timeOutId= setTimeout(function(){ 
             $(this).next().fadeIn(1000)
        ), 2000);
    },
    function(){
        clearTimeout(timeOutId);
        $(this).next().fadeOut(1000);
    });
});

Answer 2

使用setTimeout()并使用clearTimeout()

清除它

var timer;
$(function(){
    $('section.zespol_list ul li a').hover(function(){
        timer = setTimeout(function() {
            $(this).next().fadeIn(1000); 
        }, 2000);
    },
    function(){
        clearTimeout(timer);
        $(this).next().fadeOut(1000);
    });
});

Answer 3

实际上有一个名为HoverIntent的插件。我没有亲自使用它，但似乎它可以解决你的问题

2秒后执行功能

3 个答案: