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');

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

3 个答案: