用户不活跃时如何淡出div

Question

这应该很容易，但是我无法按预期工作...我有一个div元素作为按钮。 我不希望该按钮始终可见，而只是在用户触摸屏幕（用手指或鼠标）时出现，在不活动后保持可见状态一段时间（例如2秒钟）然后消失。

我不希望它在可见后2秒钟消失（为此我可以只使用jQuery延迟），我希望它在用户停止与屏幕交互后2秒钟消失（即我的情况下#grid元素） ）。 只要用户触摸屏幕或移动鼠标，按钮就可见，当他停止该活动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

您可以设置所需时间的超时时间，然后将其隐藏。 以下是参考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>