All geek questions in one place

The image is hidden, then the Fade-In, Fade-Out and Fade-In mouse movements again

I try to make the image disappear when there is no mouse action for 3 seconds, and then disappears when the mouse moves again.

I would also appreciate if anyone could tell me how I can hide the image until the mouse moves. Therefore, when the page loads, you do not see the image until the mouse moves.

This is what I still have ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <title></title> <script type="text/javascript"> var timer; $(document).mousemove(function() { if (timer) { clearTimeout(timer); timer = 0; } $('#top:visible').fadeIn(); timer = setTimeout(function() { $('#top').fadeOut() }, 3000) }) </script> </head> <body> <div id="top"> <img src="graphics/logo/logo.psd" title="" alt=""> </div> </body> </html>

Many thanks for your help!

+4
source share
2 answers

I updated my answer on an all-in-one page. Hope this makes things clearer. It is better to have javascript in your own file, but that will help you.

Make sure this line:

 <script type="text/javascript" src="jquery-1.4.1.min.js"></script>

correctly points to your jQuery file with the correct location and name.

Let me know how this happens.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>tester page</title> <style> <!-- --> </style> <script type="text/javascript" src="jquery-1.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var $top = $('#top'); var $document = $(document); var timer = null; var timerIsRunning = false; $top.hide(); $('#menu').mousemove(function(e){ e.stopPropagation(); }); setTimeout(function() { $document.mousemove(function(e) { if($top.is(':hidden')) { $top.fadeIn(); } else { if(!timerIsRunning) { timerIsRunning = true; clearTimeout(timer); timer = setTimeout(function() { $top.fadeOut(); }, 5000); setTimeout(function() {timerIsRunning = false;}, 2000); } } }); }, 500); }); </script> </head> <body> <div id="top"> <img src="graphics/logo/logo.psd" title="" alt=""> </div> </body> </html>
+2
source

Try the following:

 $(document).ready(function() { var timer; // hide initially $('#top').hide(); $(document).mousemove(function() { if (timer) { clearTimeout(timer); timer = 0; } $('#top').fadeIn(); timer = setTimeout(function() { $('#top').fadeOut(); }, 3000) }); });
+1
source

Source: https://habr.com/ru/post/1301049/

More articles:


All Articles