Hide a div when the mouse is inactive for 5 seconds, show when the mouse is active!

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>

You can see the demo of the script from the below links 😉

mouse-inactive-demo

7 thoughts on “Hide a div when the mouse is inactive for 5 seconds, show when the mouse is active!

  1. 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”

Leave a Reply

Theme: Overlay by Kaira
Agurchand