Div 基于与站点的交互淡入/淡出答案

【问题标题】：Div fade in/out based on interaction with siteDiv 基于与站点的交互淡入/淡出
【发布时间】：2016-11-30 13:36:42
【问题描述】：

我正在尝试制作一个覆盖网站 x 秒的 div，然后在访问者在页面上处于活动状态时消失。我最近的一次：

<div id="campaign">
</div>

<style>
/* campaign */

#campaign{
    display:block;
    background:url() center center no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: cover;
    background-color: #ff0000;
    overflow: visible;
    width: 100% !important;
    height: 100% !important;
    position: fixed;
    z-index: 2 !important;
}

#campaign:hover{
    cursor: pointer !important;
}
</style>

<script>
$( "#campaign" ).click(function() {
  $( "#campaign" ).fadeOut( "fast", function() {
    // Animation complete.
  });
});
</script>

它现在覆盖页面，并在点击时淡出。

我需要它在页面上交互时淡出并在不交互时淡入，这意味着如果用户转到浏览器中的另一个选项卡，#campaign 将在他们返回页面时再次可见，但随后消失当他们与网站交互时再次。

有什么建议吗？谢谢！

【问题讨论】：

标签： jquery fadein fadeout jquery-hover interaction

【解决方案1】：

您需要实现空闲计时器，它是在https://github.com/thorst/jquery-idletimer 提供的完整库，但您可以基于此创建自己的逻辑。

【讨论】：

【解决方案2】：

找到解决办法：

<script>
var timer;
$(document).mousemove(function() {
    if (timer) {
        clearTimeout(timer);
        timer = 0;
    }

    $('#campaign:visible').fadeOut();
    timer = setTimeout(function() {
        $('#campaign').fadeIn()
    }, 3000)
})
</script>

【讨论】：