jquery - jQuery 文本在 30 秒空闲后淡出

Question

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

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

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

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

Answer 1

在 mousemove 或 scroll 上清除计时器，然后重新启动计时器：

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