jquery - マウスオーバーがない場合、jQueryは5秒後に要素を自動的に非表示にします

Question

ショッピングカート効果を書いています。ユーザーが商品をショッピング カートに追加すると、フローティング カートが表示され、5 秒で非表示になります。

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

問題は、ユーザーが数量などを変更したい場合、マウスがカートの上にある場合、ユーザーのマウスがカートの上にあるときにカートが消えないようにしたいことです。

Answer 1

これに取り組む2つの主な方法

ユーザーがアイテムにマウスを合わせて非表示を停止する場合は、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

このようにすることもできます

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

または、次のように編集することもできます

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

Answer 3

ブール値を false に設定し、マウスオーバーすると true に設定できます。一方、setTimeout を使用して関数を定義します。

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