1

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

我懂了:

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

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

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

兄弟。安德斯

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

4

4 回答 4

4
$("#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);
});

那是你要找的吗?

于 2010-02-15T13:55:24.930 回答
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");
    }
});
于 2010-02-15T13:56:18.333 回答
1

像这样的东西

$(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) ;
    })
});
于 2010-02-15T13:56:41.450 回答
1

抛开 setTimeout 和 hoverintent (尽管它们是最明显的方法),我们不能为此使用 null 动画回调吗?

$("#menu ul li").hover(function(){
  $(this).animate("",500,"",function(){$(this).addClass("hover")};
},function(){
  $(this).animate("",500,"",function(){$(this).removeClass("hover");
})
于 2010-02-15T13:59:29.543 回答