javascript - jQuery - mouseenter/mouseleave 定时器不起作用

Question

我想做的只是当有人将鼠标悬停在某个元素上 1 秒时才运行我的代码。

这是我正在使用的代码:

var timer;

$(".homeLinkWrap").mouseenter(function() {
  timer = setTimeout(function(){
   $(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
    console.log('in');
  }, 1000);
}).mouseleave(function() {
    $(this).find('.homeLinkNfo').removeClass('flipInY').addClass('flipOutY');
    console.log('out');
    clearTimeout(timer);
});

第一部分(mouseenter)不起作用，并且不会删除该类然后添加新的类。第二个(mouseleave)运行正常，并且确实删除了该类并添加了新的类。

我猜测这是因为我的目标 $(this) 是当前悬停的元素，并且由于它位于计时器函数中，jQuery 不知道 $(this) 引用的是哪个元素。

我可以采取什么措施来解决这个问题？

Answer 1

我认为这是因为您在 setTimeout 函数内调用 $(this) 。你需要做这样的事情:

$(".homeLinkWrap").mouseenter(function() {
    var $self = $(this);
    timer = setTimeout(function(){
       $self.find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
       console.log('in');
    }, 1000);
});