如何在用户不活动时淡出 div

Question

这应该很容易，但我无法让它正常工作...我有一个 div 元素作为按钮。我不希望按钮一直可见，只是在用户触摸屏幕（用手指或鼠标）时出现，在 activity 之后保持可见一段时间（比如 2 秒）然后消失。

我不希望它在可见后 2 秒消失（为此我可以使用 jQuery 延迟），我希望它在用户停止与屏幕交互后 2 秒消失（即我的#grid 元素）。只要用户触摸屏幕或移动鼠标，按钮就可见，当他停止时 activity 2 秒后按钮消失。

下面我有，但是不行：

var grid = $('#grid');
    grid.bind('mousemove touchmove tap swipeleft swipeup swipedown swiperight', function(e) { 
        var timer; 
        var circle= $('.circle-button');
        if (!circle.is(":visible")) {
            //button is not visible, fade in and tell it to fade out after 2s
            $('.circle-button').fadeIn('slow');
            timer = setTimeout(function(){ $('.circle-button').fadeOut('slow') }, 2000);
        }    
        else {
            //button is visible, need to increase timeout to 2s from now
            if (timer) clearTimeout(timer);
            timer = setTimeout(function(){ $('.circle-button').fadeOut('slow') }, 2000);
        }    
    });

即使上面的方法可行，但对我来说似乎非常低效，为每次鼠标移动重新启动计时器（虽然不确定这是一个真正的问题）。如果有人可以帮助我提供一个有效的、合理有效的解决方案，我将不胜感激。干杯！

--- 编辑 ----- 谢谢大家的回复，都很好。我最终使用了下面 Rohan Veer 的建议，因为这对我来说似乎是最优雅的解决方案，而不必在每次鼠标移动时重新启动计时器。

Answer 1

试试这个 --

<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
    idleTime = 0;
});
$(this).keypress(function (e) {
    idleTime = 0;
});
});

function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 2) { // 2 minutes
    // fade out div
}
}
</script>

Answer 2

您的代码似乎非常接近可行的解决方案，我只做了一些细微的更改。几乎唯一的方法就是在每一步都设置一个计时器，同时清除之前的计时器。

下面的代码根据您的描述工作。

var timer; 
var grid = $('#grid');
grid.bind('mousemove touchmove tap swipeleft swipeup swipedown swiperight', function(e) { 
    var circle= $('.circle-button');
    if (timer) clearTimeout(timer);
    if (!circle.is(":visible")) {
        circle.fadeIn('slow');
    }    
    timer = setTimeout(function(){ circle.fadeOut('slow') }, 2000);
});

#grid{
    width:200px;
    height: 100px;
    border: 1px solid black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid"></div>
<button class="circle-button">A button</button>

Answer 3

您可以设置愿望时间的超时时间，并在经过时将其隐藏。以下是Reference JSFiddle.

代码

var interval = null;

function initInterval(){
    if(interval)
        clear();
    
    showElement();
 interval = setTimeout(function(){
     $(".btn").fadeOut();
        clear();
    },2000);
}

function clear(){
 window.clearInterval(interval);
    interval = null;
}

function showElement(){
 $(".btn").fadeIn();
}

function registerEvents(){
    console.log("Events registering");
 $(document).on("mousemove", function(){
     initInterval();
    });
}

(function(){
 registerEvents();
})()

.btn{
    width:200px;
    background:blue;
    color:#fff;
    padding:5px;
    text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn">Will hide in 2 secs</div>

如何在用户不活动时淡出 div

How to fade out div when user is inactive

html

javascript

jquery

timer

settimeout

代码