Detect mousemove with jquery

Question

Is there a way to detect when the mouse has stopped moving in jquery?

Answer 1

Yes, use setTimeout and clear it every time when the mouse moves. If the mouse hasn't been moved in the time specified in setTimeout, then you can assume mouse has stopped moving. Utilizing jQuery, you could do something like this:

var stop_timeout = false;
$(function() {
    $().mousemove(function() {
        clearTimeout(stop_timeout);
        stop_timeout = setTimeout(function() {
            alert("The mouse has stopped.");
        }, 1000);            
    });
});

It's a bit heavy to set and unset timeouts every time the mouse moves, but it should work for your purposes.

Answer 2

Use hoverintent, it does all this for you. It has an interval that tracks your mouse movements and knows when your acceleration has slowed (so you're trying to "truly" hover over something).

It's also incredibly easy to use. You basically just need to change your

$( selector ).hover( ... )

to

$( selector ).hoverIntent( ... )

http://cherne.net/brian/resources/jquery.hoverIntent.html