execute Jquery when the mouse stops moving

Question

I have a quick script that has a trail follow the cursor:

jQuery(document).ready(function(){
   $(document).mousemove(function(e){
       $('.fall').each(function(){
           if ($(this).css("opacity") == 0){
               $(this).remove();
           };
       });
       t = (e.pageY - 10).toString() + 'px';
       l = (e.pageX - 10).toString() + 'px';
       $('.fall').css("margin_left",l);
       $('.fall').css("margin_top",t);
       var doit = '<div class="fall" style="position:fixed;margin-left:' + l + ';margin-top:' + t + ';">+</div>'
       $('body').prepend(doit);
      $('#status2').html(e.pageX +', '+ e.pageY);

       $('.fall').animate({
           marginTop: '+=50px',
           opacity: 0
       },1000);       
   }); 
});

Now I would like to remove the animate part and have something like the following when the mouse is not moving:

$('.fall').each(function(){
    $(this).fadeOut('slow');
    $(this).remove()
});

I just can't figure out how to execute this when the mouse is not moving for more than like a second. Any ideas?

Thanks, and here is a jsfiddle

update a var `mouseLastMoved` each time it's moved and use a setTimeout to check that `now > mouseLastMoved + x seconds`? — Popnoodles, Jun 22 '13 at 15:56
I don't quite understand what you want but I updated it to use your new code: http://jsfiddle.net/wVVbT/9/ - does this help? — Joe, Jun 22 '13 at 15:58
I need that line to execute when the mouse stops moving...so the updated code you just posted is not what I want — Ryan Saxe, Jun 22 '13 at 16:01
@RyanSaxe - ok, what about this: http://jsfiddle.net/wVVbT/13/ (note: credit goes to adeneo, I just added and removed a few bits of code) — Joe, Jun 22 '13 at 16:07

adeneo · Answer 1 · 2017-05-05T09:33:48.003

15

You add a timeout that fires after one second of inactivity, and clear the timeout if the mouse moves within 1 second etc :

var timer;
$(document).on('mousemove', function(e){
   clearTimeout(timer);

   timer = setTimeout(function() {
       $('.fall').fadeOut('slow', function() {
           $(this).remove();
       });
   }, 1000);
});

FIDDLE

EDIT:

Here's how I'd do it

FIDDLE

edited May 05 '17 at 09:33

answered Jun 22 '13 at 16:01

adeneo

312,895
29
395
388

The goal is to make them fade out when stopped. This doesn't do that, it just makes it stop drawing. and then you can't start again... – Ryan Saxe Jun 22 '13 at 16:06
@RyanSaxe - But don't they already fade out? Anyway, edited the answer, same principle for figuring out when the mouse stopped for a second etc. – adeneo Jun 22 '13 at 16:09
1

@adeneo - I think they want something like this: http://jsfiddle.net/wVVbT/13/ - all they need to do to make yours work how they want is to remove a few lines in their original function. – Joe Jun 22 '13 at 16:10
@adeneo +1 Great approach! Just a note. For best practices, your code above and in the fiddle should probably use clearTimeout, not clearInterval, since you're setting a timeout. See http://stackoverflow.com/questions/9913719/are-cleartimeout-and-clearinterval-the-same – dallin May 05 '17 at 04:09

score 7 · Accepted Answer · edited Jan 22 '16 at 06:03

7

is this what you require? jsFiddle

lastTimeMouseMoved = new Date().getTime();
var t = setTimeout(function() {
  var currentTime = new Date().getTime();
  if (currentTime - lastTimeMouseMoved > 1000) {
    $('.fall').fadeOut('slow');
    // $('.fall').remove();
  }
}, 1000)

edited Jan 22 '16 at 06:03

nem035

34,790
6
87
99

answered Jun 22 '13 at 16:06

Varun

5,001
12
54
85

That is almost perfect!! That is exactly the point...but it doesn't fade out, it just gets removed – Ryan Saxe Jun 22 '13 at 16:08
just comment // $('.fall').remove(); that will do – Varun Jun 22 '13 at 16:10
@Down voter - in case you downvote an answer please feel free to describe a reason for the same – Varun Jun 22 '13 at 16:13

execute Jquery when the mouse stops moving

2 Answers2

Linked