jQuery 文本在 30 秒空闲后消失

Question

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

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

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

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

Answer 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