javascript - 鼠标移动（）上的fadeIn导航-一定时间后淡出？

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/

Answer 2

$(document).ready(function(){

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

});

这是 5 秒。5秒后会淡出