javascript - Jquery:如何在鼠标空闲时使某些东西淡出。当鼠标再次移动时，它会淡入!

Question

我有一个名为“#top”的 div。当鼠标空闲 3 秒时，我希望它淡出。当鼠标再次移动时，让它出现(当然是淡出)

有人知道怎么做吗？

非常感谢。

Answer 1

使用setTimeout ，将返回值保存在某处(当鼠标再次移动时用 clearTimeout 取消它):

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

    $('#top:visible').fadeIn();
    timer = setTimeout(function() {
        $('#top').fadeOut()
    }, 3000)
})

您需要在 $(document).ready() 或类似内容中使用它。