Question

所以我试图实现一个弹出窗口，用户将鼠标悬停在一个元素上，当用户将鼠标悬停在这个元素上时，jQuery会将一个类添加到另一个兄弟元素中，使其可见。当用户徘徊时，我想在再次删除课程之前添加类似5秒的延迟，但是到目前为止我尝试这样做还没有成功，有人可以给我一个关于我能用什么方法的指针使用？

以下是我目前使用的代码：

$('.spaceship-container').hover(
function(){
    $('.take-me-to-your-newsletter').addClass('show')
},
function(){
    setTimeout(3000);
    $('.take-me-to-your-newsletter').removeClass('show')
}
);

Answer 1

使用setTimeout()函数的正确语法可以解决您的问题。但您还需要使用clearTimeout()停止鼠标输出功能。

var timer;
$('.spaceship-container').hover(
  function() {
    clearTimeout(timer);
    $('.take-me-to-your-newsletter').addClass('show');
  },
  function() {
    timer = setTimeout(function(){
        $('.take-me-to-your-newsletter').removeClass('show');
    }, 3000);
  }
);

Answer 2

您需要在removeClass的回调中添加setTimeout，如下所示：

$('.spaceship-container').hover(
function(){
    $('.take-me-to-your-newsletter').addClass('show')
},
function(){
    setTimeout(function(){
         $('.take-me-to-your-newsletter').removeClass('show') //here
    },3000);
});

因此，一旦3秒时间完成，回调函数内的行将被执行。

加上 DEMO

当用户将鼠标移开时，jQuery Hover with Delay

2 个答案: