jquery - 在 mouseenter/hover 上延迟添加/删除类

Question

当用户将鼠标悬停在元素上时，我试图延迟向元素添加和删除类：

$('#thumbs div').mouseenter(function() {            
    $('#thumbs div').removeClass('hovered');
    $(this).addClass('hovered');
});

有没有办法做到这一点？例如，我想要大约 0.3 秒的延迟。

谢谢！

Answer 1

你可以试试这样的

$("#thumbs div").on('mouseenter', function() {            
    var el = $(this);    
    setTimeout(function() {
        $('#thumbs div').removeClass('hovered');
        el.addClass('hovered');
    }, 300);
}).on('mouseleave', function(){
    var el = $(this);
    setTimeout(function() {
        el.removeClass('hovered');
    }, 300);
});

演示。

Answer 2

$("#thumbs div").mouseenter(function() {            
    var self = $(this);    

    self.removeClass('hovered');

    window.setTimeout(function() {
        self.addClass('hovered');
    }, 300);
});

Answer 3

你可以排队：

$("#thumbs div").mouseenter(function() {
  $(this).delay(300).queue(function(next){
    $('#thumbs div').removeClass('hovered');
    $(this).addClass('hovered');
    next();
  });
});

如果鼠标离开http://api.jquery.com/clearQueue/之类的东西，您可能想要取消它/清除队列。

Answer 4

试试这个：

 $("#thumbs div").mouseenter(function() {   
      $(this).removeClass('hovered');
      setTimeout("addClassCustom", 300);
 });

 function addClassCustom() {
      $("#thumbs div").addClass('hovered');
 }