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