Imagen Oculta, a continuación, en el movimiento del ratón Fade-in, fade-out y Fundido de nuevo

StackOverflow https://stackoverflow.com/questions/2248044

Pregunta

Estoy tratando de obtener una imagen a desaparecer cuando no ha habido ninguna acción del ratón durante 3 segundos y luego se desvanece cuando se vuelve a mover el ratón.

Me gustaría también ser agradecido si alguien podría decirme cómo puedo hacer que la imagen se podrá ver hasta que el ratón se mueve. Así que cuando se carga la página hasta que no se ve la imagen hasta que se mueve el ratón.

Esto es lo que tengo hasta ahora ... 

<!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>

Muchas gracias por su ayuda!

¿Fue útil?

Solución

He actualizado mi respuesta con una página todo-en-uno. Espero que esto hará que las cosas más claras. Es mejor tener Javascript en su propio archivo, pero esto le ayudará a ir.

Asegúrese de que esta línea: 

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

apunta correctamente a su archivo de jQuery con la ubicación y el nombre correcto.

Déjame saber cómo 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>

Otros consejos

Prueba esto: 

$(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)
    });
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top