jQuery 文本在 30 秒空闲后淡出答案

【问题标题】：jQuery text fade after 30 second idlejQuery 文本在 30 秒空闲后淡出
【发布时间】：2013-06-19 17:38:56
【问题描述】：

我有这段代码可以在 30 秒的初始延迟后淡化某些媒体下方的信息文本。移动鼠标后，信息文本将恢复为完全不透明

setTimeout( '$(".media_info").animate({"opacity":".1"},5000)',30000);

$(document).mousemove(function() {
   $(".media_info").css('opacity','1');
});

理想情况下，我想要实现的是：在页面加载时，监视鼠标和滚动移动。如果鼠标和滚动 30 秒没有输入，那么文本会消失。移动鼠标或滚动条后，文本将恢复为完全不透明状态，并且 30 秒计时器重新启动。关于实现这一目标的最佳方法的任何想法？任何帮助将不胜感激。

【问题讨论】：

标签： jquery settimeout

【解决方案1】：

Clear the timer 鼠标移动或滚动，然后重新启动计时器：

function startTimer() {
    window.timer = setTimeout( function() {
        $(".media_info").animate({"opacity":0.1},5000);
    }, 30000);
};

$(document).on('scroll mousemove',function() { // 'keydown' as well?
    $(".media_info").stop().css({"opacity":1}); // stop the animation
    clearTimeout(window.timer);
    startTimer();
});
startTimer(); // start it now

【讨论】：