Immagine Hidden, poi sul movimento del mouse Fade-in, fade-out e fade-in di nuovo
-
20-09-2019 - |
Domanda
I sto cercando di ottenere un'immagine a svanire quando non c'è stata alcuna azione del mouse per 3 secondi e poi svanisce quando il mouse viene spostato di nuovo.
Vorrei anche essere riconoscente se qualcuno potrebbe dirmi come posso fare l'immagine essere nascosto fino a quando il mouse si muove. Così, quando la pagina viene caricata fino non si vede l'immagine fino a quando il mouse si muove.
Questo è ciò che ho finora ...
<!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>
Grazie mille per il vostro aiuto!
Soluzione
Ho aggiornato la mia risposta con una pagina all-in-one. Speriamo che questo renderà le cose più chiare. Meglio avere javascript nel proprio file, ma questo sarà farti andare.
Assicurarsi che questa riga:
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
sottolinea giustamente al file jQuery con la giusta posizione e il nome.
Fatemi sapere come va.
<!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>
Altri suggerimenti
Prova questo:
$(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)
});
});