Jquery：当鼠标空闲时如何使某些东西淡出。当鼠标再次移动时，它会淡入！

【问题标题】：Jquery: how to make something fade out when mouse is idle. When mouse moves again, It fadesIn!Jquery：当鼠标空闲时如何使某些东西淡出。当鼠标再次移动时，它会淡入！
【发布时间】：2012-10-16 06:08:05
【问题描述】：

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

有人知道怎么做吗？

非常感谢。

【问题讨论】：

标签： javascript jquery user-interface

【解决方案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() 之类的里面。

【讨论】：

这似乎对我有用，但它不会褪色，并且该元素不会在鼠标移动时重新出现。