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