Question

问题已多次发布，是如何延迟addClass。

我明白了：

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

想要类似的东西，但是在500msek左右之后添加课程。到目前为止，最佳答案是使用settimeout。也许我只需要一个有效的例子： How to wait 5 seconds with jQuery?

hooverIntent不起作用，因为它必须是addClass。

溴。安德斯

更新：四个很棒的答案！谢谢。我不知道为什么我不认为hoverIntent会起作用，它可以在答案中看到。实际上所有的答案都可以使用各有利弊。即使必须包含另一个插件，我也会使用hoverIntent。 hoverIntent的pro是可以设置一个sensibilty，这样不仅可以设置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和hoverintent放在一边（尽管它们是最明显的方法），我们不能为此使用空动画回调吗？

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

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

4 个答案: