Make a rest screen with Jquery

I need to make a rest screen, when the mouse stands still for a few seconds opens the Div of rest, I tried this without success: 

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

});
</script>

When the mouse moves again to Div some.

 3
jquery
Author: stderr, 2014-05-02
Source

3 answers

Here is an example: (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();
    }
  });

Basically what is missing in your script is to reset the timer when the mouse moves.

 1
Author: Tivie, 2014-05-02 06:17:33

Can do like this: 

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);

Example

My idea is:

  • record the time (in milliseconds) when the page loads, and each time the mouse has movement.
  • check every 3 seconds if the difference between the time at that time and the time recorded before is greater than 10 seconds.
  • shows the window when the stopped time is more than 10 seconds
  • hides the window when the mouse moves

Other variant is to have an auxiliary function that (re)starts a countdown when the mouse moves.

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);

Example

 2
Author: Sergio, 2014-05-02 07:29:01

You can do one like this: 

var s_saver;

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

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

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

Fiddle

The effect is caused by .fadeIn() which leaves the elements opaque and .fadeOut() which hides the elements until they become transparent. In the example above this happens after four seconds, when the event occurs.mousemove the count resets.

Fonte

 2
Author: stderr, 2017-05-23 12:37:33