JQuery hides the mouse if it does not move

Question

I try to hide the mouse if it does not move for a certain period of time.

This is the code I'm using:

$(document).ready(function() { var j; $(document).mousemove(function() { clearTimeout(j); $('html').css({cursor: 'default'}); j = setTimeout('hide();', 1000); }); }); function hide() { $('html').css({cursor: 'none'}); } 

When the hide () function is called, the cursor is hidden, but a second is shown later. Any help is appreciated.

Answer 1

Your initial problem is that hiding the mouse starts mousemove and thus immediately resets it back to default. So you could solve it like this ...

 var justHidden = false; $(document).ready(function() { var j; $(document).mousemove(function() { if (!justHidden) { justHidden = false; console.log('move'); clearTimeout(j); $('html').css({cursor: 'default'}); j = setTimeout('hide();', 1000); } }); }); function hide() { $('html').css({cursor: 'none'}); justHidden = true; }​ 

... BUUUUUT ...

You are facing a problem that now seems insoluble to me. That is, the hidden mouse does not start mousemove ever, therefore, as soon as it is hidden, you will not be able to display it, as far as I can tell.

I will continue the investigation to see if there is a solution that I am missing.