jquery addClass - 等待、延迟、速度、超时或其他

Question

这个问题已经被发布了好几次，是如何延迟 addClass 的。

我得到了这个：

$("#menu ul li").hover(function(){
  $(this).addClass("hover");
},function(){
  $(this).removeClass("hover");
})

并且想要类似的东西，但是在 500msek 左右之后添加类。到目前为止最好的答案是使用 settimeout。也许我只需要一个工作示例： 如何使用 jQuery 等待 5 秒？

hooverIntent 将无法工作它必须是一个addClass。

Br。安德斯

更新：四个很好的答案！谢谢。我不知道为什么我认为hoverIntent不起作用，它可以如答案中所示使用。实际上，所有答案都可以使用，各有利弊。即使必须包含另一个插件，我也会使用hoverIntent。 hoverIntent 的优点是可以设置灵敏度，因此不仅可以设置 addClass 的延迟，而且当鼠标仍然位于该区域上方时（或者如果喜欢灵敏度，则不会那么静止），它将首先开始计数

Answer 1

$("#menu ul li").hover(function(){
  var $this = $(this);
  var ovt = setTimeout(function(){$this.addClass('hover'); clearTimeout(ovt);}, 500);
},function(){
  var $this = $(this);
  var out = setTimeout(function(){$this.removeClass('hover'); clearTimeout(out);}, 500);
});

这就是您要找的吗？

Answer 2

我不明白为什么 hoverIntent 不起作用：

$("#menu ul li").hoverIntent({    
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
    interval: 200, // number = milliseconds for onMouseOver polling interval    
    timeout: 500, // number = milliseconds delay before onMouseOut    
    over:function(){
        $(this).addClass("hover");
    },
    out: function(){
        $(this).removeClass("hover");
    }
});

Answer 3

像这样的东西

$(function(){
    $("#menu ul li").hover(function(){
        var elem = $(this);
        setTimeout ( function(){
            elem.addClass("hover");
        }, 1000) ;
        },function(){
        var elem = $(this);
        setTimeout ( function(){
            elem.removeClass("hover");
        }, 1000) ;
    })
});

Answer 4

抛开 setTimeout 和悬停意图不谈（尽管它们是最明显的方法），我们不能为此使用空动画回调吗？

$("#menu ul li").hover(function(){
  $(this).animate("",500,"",function(){$(this).addClass("hover")};
},function(){
  $(this).animate("",500,"",function(){$(this).removeClass("hover");
})