jQuery 当用户将鼠标移开时悬停延迟

Question

所以我试图实现一种弹出情况，用户将悬停在一个元素上，当用户悬停在该元素上时，jQuery 将 class 添加到另一个同级元素，这使得它可见。当用户悬停时，我想在 class 再次被删除之前添加大约 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 的回调中添加 removeClass，如下所示：

$('.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给你

Answer 2

使用 setTimeout() function fixes your issue. But you also need to stop mouseout function using 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);
  }
);

jQuery 当用户将鼠标移开时悬停延迟

jQuery Hover with Delay when the user moves their mouse away

javascript

jquery

jquery-hover