根據與網站互動的淡入淡出

Question

我正在嘗試製作一個覆蓋網站x秒的div，然後當訪問者在頁面上處於活動狀態時消失。最接近我來：

<div id="campaign"> 
 
</div> 
 

 
<style> 
 
/* campaign */ 
 

 
#campaign{ 
 
    display:block; 
 
    background:url() center center no-repeat; 
 
    -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    -o-background-size: contain; 
 
    background-size: cover; 
 
    background-color: #ff0000; 
 
    overflow: visible; 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
    position: fixed; 
 
    z-index: 2 !important; 
 
} 
 

 
#campaign:hover{ 
 
    cursor: pointer !important; 
 
} 
 
</style> 
 

 
<script> 
 
$("#campaign").click(function() { 
 
    $("#campaign").fadeOut("fast", function() { 
 
    // Animation complete. 
 
    }); 
 
}); 
 
</script>

現在覆蓋了網頁，並點擊時淡出。

我需要它在頁面上進行交互時淡出，並在不進行交互時淡入，這意味着如果用戶轉到其瀏覽器中的另一個選項卡，則#campaign會在他們返回頁面時再次變爲可見，當他們與網站互動時再次消失。

有什麼建議嗎？謝謝！

Answer 1

您需要實現閒置計時器，該計時器可在https://github.com/thorst/jquery-idletimer處完成，但您可以基於此創建自己的邏輯。

Answer 2

實測值的溶液：

<script> 
 
var timer; 
 
$(document).mousemove(function() { 
 
    if (timer) { 
 
     clearTimeout(timer); 
 
     timer = 0; 
 
    } 
 

 
    $('#campaign:visible').fadeOut(); 
 
    timer = setTimeout(function() { 
 
     $('#campaign').fadeIn() 
 
    }, 3000) 
 
}) 
 
</script>