javascript - mousemove() 上的淡入导航 - 一定时间后淡出？

Question

我的网站上有一个 #pagination，默认设置为 display:none

当在我的整个文档上移动鼠标时，我想在鼠标移动停止后让它们淡入并在一定时间后淡出。我完全不知道什么是最好的方法。有什么想法吗？

$(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
    });
    
});

一旦鼠标移动停止，我想在“#pagination”再次淡出之前有一个短暂的延迟。

Answer 1

假设您希望确保用户在淡化我们的#pagination 之前停止移动鼠标，您需要设置一个简单的计时器:

$(document).ready(function(){ 

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

});​

只要用户停止移动鼠标，#pagination 就会淡出。当他们再次开始移动它时，#pagination 淡入。如果您不希望它淡入，您可以轻松修改它。

查看现场示例:http://jsfiddle.net/akVkT/2/