jquery - 5秒后jQuery自动隐藏元素，如果没有鼠标悬停

Question

我正在写一个购物车效果。当用户将产品添加到购物车时，浮动购物车会在 5 秒后出现并隐藏。

$("#cart").show().delay(5000).hide();

问题是如果用户想要更改数量之类的东西并且鼠标在购物车上，显然我不希望当用户鼠标在购物车上时购物车消失。

Answer 1

解决此问题的两种主要方法

如果用户将鼠标悬停在项目上以停止隐藏，则使用 clearTimeout。

var countdown;

$("#cart").show().hover(function() {
    clearTimeout(countdown);
})

countdown = setTimeout(function() {
$('#cart').hide();
}, 5000);

或者

使用布尔值来决定是否进行隐藏

mouseOver = false;
$("#cart").show(function() {
  setTimeout(function() {
    if (!mouseOver)
       $('#cart').hide();
   }, 5000)).hover(function() {
    mouseOver = true;
};

您也可以（这会使项目消失，除非他们每 5 秒将鼠标移到项目上）：

var countdown;

$("#cart").show(resetCountdown).mousemove(resetCountdown);

function resetCountdown() {
   clearTimeout(countdown);
   countdown = setTimeout(function() {
      $('#cart').hide();
   }, 5000);
}

Answer 2

您可以将布尔值设置为 false，然后在鼠标悬停时将其设置为 true。同时，使用 setTimeout 定义一个函数：

setTimeout(function() {
if (!mybool)
$('#cart').hide();
}, 5000);

Answer 3

你也可以这样试试

$(document).ready(function(){
   $("#cart").show();
   $("#cart").delay(5000).hide();
});

或者你也可以编辑

$("#cart").hide('5000');