jQuery自動隱藏元素5秒後，如果沒有鼠標過

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