Imagem escondida, depois no movimento do mouse desaparece, desaparece e desaparecem novamente

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

Pergunta

Estou tentando obter uma imagem para desaparecer quando não houve ação do mouse por 3 segundos e depois desaparece quando o mouse é novamente movido.

Eu também agradeceria se alguém pudesse me dizer como posso fazer a imagem ser escondida até que o mouse se mova. Então, quando a página carrega, você não vê a imagem até que o mouse se mova.

Isso é o que eu tenho até agora ...

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

Muito obrigado pela sua ajuda!

Foi útil?

Solução

Atualizei minha resposta com uma página tudo em um. Espero que isso torne as coisas mais claras. Melhor ter JavaScript em seu próprio arquivo, mas isso o fará ir.

Certifique -se de que esta linha:

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

aponta corretamente para o seu arquivo jQuery com o local e o nome certos.

Deixe -me saber como foi.

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

Outras dicas

Experimente isso:

$(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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top