3

Preciso fazer uma tela de descanso, quando o mouse ficar parado por alguns segundos abre a div de descanso, tentei isso sem sucesso:

<script type="text/javascript">
$(window).mousemove(function(event) {
   clearTimeout(timer);
   timer = setTimeout(function() {
      $('#result').fadeIn('fast');
   }, 10000);

});
</script>  

Quando o mouse mover novamente a div some.

3 Respostas 3

2

Pode fazer assim:

var ultimoMovimento = new Date();
var janela = $('#janela');
$(window).on('mousemove', function () {
    ultimoMovimento = new Date();
    janela.hide();
});
var verificar = setInterval(function () {
    var agora = new Date();
    var diferenca = (agora.getTime() - ultimoMovimento.getTime()) / 1000;
    if (diferenca > 10) janela.show();

}, 3000);

Exemplo

A minha ideia é:

  • registrar a hora (em milisegundos) quando a página carrega, e cada vez que o mouse tem movimento.
  • verificar a cada 3 segundos se a diferença entre a hora nesse momento e a hora registrada antes é maior que 10 segundos.
  • mostra a janela quando o tempo parado for mais do que 10 segundos
  • esconde a janela quando o mouse mexe

Outra variante é ter uma função auxiliar que (re)começa uma contagem decrescente quando o mouse move.

function esperar() {

    janela.hide();
    var limpar;
    clearInterval(limpar);
    limpar = setTimeout(function () {
        janela.show();
    }, 10000); // 10 segundos, 10 000 milisegundos
}

var janela = $('#janela');
$(window).on('mousemove', esperar);

Exemplo

7
  • O @brasofilo não gosta de PT_pt :)
    – Sergio
    2/05/2014 às 6:50
  • OMG, em pt_PT o registrar não tem esse R? Sorry... Já me estranhava, o mesmo erro tipografico 2x, lição aprendida :)
    – brasofilo
    2/05/2014 às 6:53
  • @brasofilo acontece :) . Outro dia eu apanhei pra descobrir o que eram "plicas".
    – Largato
    2/05/2014 às 6:55
  • @Bacco, comPlicas, exPlicas?
    – brasofilo
    2/05/2014 às 6:58
  • @brasofilo :) não tem mal, aí eu aprendí como se diz em PT_br
    – Sergio
    2/05/2014 às 6:59
2

Você pode fazer um assim:

var s_saver;

$('body').mousemove(function() {
    clearTimeout(s_saver);

    s_saver = setTimeout(function(){
        $('#screensaver').fadeIn(900);
    }, 4000);

    $('#screensaver').fadeOut(100);
});

Fiddle

O efeito é causado pelo .fadeIn() que deixa os elementos opacos e .fadeOut() que esconde os elementos até ficarem transparentes. No exemplo acima isso acontece após quatro segundos, quando ocorre o evento .mousemove a contagem é reiniciada.

Fonte

1

Tem aqui um exemplo: (PLUNKR)

  $( document ).ready(function() {
    var timeout = setTimeout(showTela, 3000);
    $(document).mousemove(onEvent);
    $(document).mousedown(onEvent);
    $(document).keydown(onEvent);


    function onEvent() {
      $('#tela').hide();
      clearTimeout(timeout);
      timeout = setTimeout(showTela, 3000);
    }

    function showTela() {
      $("#tela").show();
    }
  });

Basicamente o que falta no seu script é fazer reset no timer quando o rato mexe.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .