CODEWITHSUNDEEP
javascriptjqueryjquery-eventsmousemove
matt
matt

Reputation: 44293

fadeIn Navigation on mousemove() - fadeOut after certain time?

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.

Upvotes: 1

Views: 1291

Answers (2)

pat34515
pat34515

Reputation: 1979

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/

Upvotes: 3

Pathik Gandhi
Pathik Gandhi

Reputation: 1344

$(document).ready(function(){

    $(document).on('mouseout', '#pagination', function() {
        $(this).delay(5000).fadeOut('fast');
    });

});

This is for 5 sec. after 5 sec it will fadeout

Upvotes: 2

Related Questions