Better example of jQuery mousemove() event to Show div for 5 seconds then Hide it after the delay!
This script is basically show a div when the mouse is active ie., when you move the mouse on the Document, If the mouse is not active then the div will disappear after 5 seconds.
Here is the entire code with demo and download!
<html>
<head>
<style>
#showdiv{
width: 250px;
border-radius: 10px;
padding: 10px;
border: 2px double gray;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
var timedelay = 1;
function delayCheck()
{
if(timedelay == 5)
{
$('#showdiv').fadeOut();
timedelay = 1;
}
timedelay = timedelay+1;
}
$(document).mousemove(function() {
$('#showdiv').fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 500);
});
// page loads starts delay timer
_delay = setInterval(delayCheck, 500)
</script>
</head>
<body>
<div id="showdiv">
<h2>hide me when the mouse is inactive for 5 seconds.</h2>
</div>
</body>
</html>
<html>
<head>
<style>
#showdiv{
width: 250px;
border-radius: 10px;
padding: 10px;
border: 2px double gray;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
var timedelay = 1;
function delayCheck()
{
if(timedelay == 5)
{
$('#showdiv').fadeOut();
timedelay = 1;
}
timedelay = timedelay+1;
}
$(document).mousemove(function() {
$('#showdiv').fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 500);
});
// page loads starts delay timer
_delay = setInterval(delayCheck, 500)
</script>
</head>
<body>
<div id="showdiv">
<h2>hide me when the mouse is inactive for 5 seconds.</h2>
</div>
</body>
</html>
<html>
<head>
<style>
#showdiv{
width: 250px;
border-radius: 10px;
padding: 10px;
border: 2px double gray;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
var timedelay = 1;
function delayCheck()
{
if(timedelay == 5)
{
$('#showdiv').fadeOut();
timedelay = 1;
}
timedelay = timedelay+1;
}
$(document).mousemove(function() {
$('#showdiv').fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 500);
});
// page loads starts delay timer
_delay = setInterval(delayCheck, 500)
</script>
</head>
<body>
<div id="showdiv">
<h2>hide me when the mouse is inactive for 5 seconds.</h2>
</div>
</body>
</html>
You can see the demo of the script from the below links 
Ohh its nice and helpful to me
Nice one, thanks!
Great, 10X !!!
Perfect!!! Thanks!!!
Nice Script.
How can I transform this the other way around… Like:
“hide a div if mouse is active then show if mouse is inactive”
You just have to change the fadeOut() and fadeIn(). Here is the example code for you: https://theonlytutorials.com/hide-a-div-if-the-mouse-is-active-show-if-the-mouse-is-inactive/