Question

I have a #pagination on my site which is by default set to display:none

When moving the mouse on my entire document I want to fade them in and fade them out after a certain time once the mousemovement stopped. I have absolutely no clue what’s the best way to do this. Any ideas on that?

$(document).ready(function(){
    
    $(document).on('mousemove', 'body', function() {
        $('#pagination').fadeIn('fast');
        //once the mousemovement stopped I want a 3sec counter till it fades out agian
    });
    
});

Once the mousemovement stopped I’d like to have a short delay in it before the `#pagination’ fades out again.

Answer 1

Assuming you’d want to make sure the user stops moving their mouse before fading our your #pagination, you’d need to set a simple timer:

$(document).ready(function(){ 

    var c, p = $('#pagination');
    $(document).on('mousemove',function() {        
       p.fadeIn('medium');
       clearTimeout(c);
       c= setTimeout(function(){
           p.fadeOut('medium');
       }, 600);
    });

});​

Whenever the user stops moving their mouse, the #pagination fades out. When they start moving it again, #pagination fades in. You could easily modify it if you don’t want it to fade back in.

See the live example at: http://jsfiddle.net/akVkT/2/