Mouse-free event Movement within 3 seconds

Question

I have several menus in my script, and I want a jquery script that will make the menu hide if the mouse does not move for 3 seconds ..

I know its a real silly question, but I cudnt get any answer anywhere.

its not a proper script but i just want if something happens like this ??

$("#target").notmousemove(function(event) { $('#menu').hide(); },delay(500)); 

It will be very helpful if someone answers my request.

I made the menu disappear based on the click of a button, but now wud I rather want the menu to hide when the mouse has not been moved for more than 5 seconds ...

Answer 1

Use setTimeout in the mouseMove handler. If the mouse moves again before the timeout expires, simply clear it with clearTimeout and run the timeout again.

So something like:

 var timeoutid = 0; $("#someRootElement").mousemove(function() { if (timeoutid) { clearTimeout(timeoutid); timeoutid = 0; } timeoutid = setTimeout(myFunctionToHideMenu, 5000); }); 

Edit: In fact, you don’t even need to check if the timer is already running. Attempting to stop an invalid timer identifier or a timer that is already stopped will not result in errors. Therefore, you can simply:

 var timeoutid = 0; $("#someRootElement").mousemove(function() { clearTimeout(timeoutid); timeoutid = setTimeout(myFunctionToHideMenu, 5000); }); 

Answer 2

Try the following:

 var t; var delay = 3000; //Ms delay $("#target").mousemove(function(){ clearTimeout(t); var t = setTimeout(function(){ //Has not been moved $('#menu').hide(); }, delay); }); 

Answer 3

 function notMouseMove() { $("#menu").hide(); } var timer = setTimeout(notMouseMove, 3000); $(document).on('mousemove', function () { clearTimeout(timer); timer = setTimeout(notMouseMove, 3000); }); 

Answer 4

Just scan your own plugin:

 $.fn.notmousemove = function(time, callback) { return this.each(function(i,ele) { $(ele).on({ mouseenter: function() { $(this).data('nomousetimer', setTimeout(callback, time)); }, mousemove: function() { clearTimeout($(this).data('nomousetimer')); $(this).data('nomousetimer', setTimeout(callback, time)); }, mouseleave: function() { clearTimeout($(this).data('nomousetimer')); } }); }); }; 

Fiddle