Hide a div when mouse is inactive for 5 seconds then show when 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="http://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 or download the script from the below links 😉

Demo Download

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *