Div Einblenden/Ausblenden basierend auf Interaktion mit der Site

Question

Ich versuche, ein div, das die Website für x Sekunden abdeckt und dann verschwindet, wenn der Besucher auf der Seite aktiv ist. Der nächstgelegene ich gekommen sind:

<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>

Es umfasst jetzt die Seite, und ausblendet, wenn darauf geklickt.

Ich brauche es zu verblassen bei der Interaktion auf der Seite und einblenden, wenn nicht interagieren, was bedeutet, dass, wenn der Benutzer zu einem anderen Tab in ihrem Browser geht die #Kampagne wieder sichtbar gemacht wird, wenn sie auf die Seite zurückkehren, aber dann verschwindet erneut, wenn sie mit der Site interagieren.

Irgendwelche Vorschläge? Vielen Dank!

Answer 1

Sie müssen Leerlauf-Timer implementieren, die komplette Bibliothek available bei https://github.com/thorst/jquery-idletimer ist, aber Sie können Ihre eigene Logik basierend darauf erstellen.

Answer 2

eine Lösung gefunden:

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

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