Question

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

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

有办法做到这一点吗？我希望延迟大约0.3秒。

谢谢！

Answer 1

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

    self.removeClass('hovered');

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

Answer 2

你可以排队：

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

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

Answer 3

您可以尝试这样的事情

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

DEMO.

Answer 4

试试这个：

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

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

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

4 个答案: