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

jQuery文本在30秒空闲后淡出

1 个答案: