Jquery: cómo hacer que algo se desvanezca cuando el mouse está inactivo. Cuando el mouse se mueve de nuevo, ¡se desvanece!

Question

Tengo un div llamado "#top". Me gustaría que se desvanezca cuando el mouse esté inactivo durante 3 segundos. Cuando el mouse se mueve nuevamente, haz que aparezca (se desvanece, por supuesto)

¿Alguien sabe cómo hacer esto?

Muchas gracias.

Answer 1

Uso setTimeout, ahorrando el valor de retorno en alguna parte (de anularla con clearTimeout cuando el ratón se mueve de nuevo):

var timer; 
$(document).mousemove(function() { 
    if (timer) { 
     clearTimeout(timer); 
     timer = 0; 
    } 

    $('#top:visible').fadeIn(); 
    timer = setTimeout(function() { 
     $('#top').fadeOut() 
    }, 3000) 
}) 

Querrá esto dentro $(document).ready() o similares.