不活动时淡出鼠标光标（使用 jQuery）答案

【问题标题】：Fade out mouse cursor when inactive (with jQuery)不活动时淡出鼠标光标（使用 jQuery）
【发布时间】：2013-03-20 18:59:57
【问题描述】：

我有一个 fade-object 类的元素，当鼠标在一定时间（本例中为 5000 毫秒）不活动时淡出，当鼠标再次移动时淡入。

这是我正在使用的代码：

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

            $('.fade-object').fadeIn();
            timer = setTimeout(function() {
                $('.fade-object').fadeOut()
            }, 5000)
        })

如何使鼠标光标以相同的方式淡入和淡出，与我的fade-object div 同步？

【问题讨论】：

标签： javascript jquery css mouse-cursor

【解决方案1】：

在html 的CSS 中设置cursor: none 并防止在fadeout 之后直接发生的mousemove 事件重新显示该项目。

Demo

$(function () {
    var timer;
    var fadeInBuffer = false;
    $(document).mousemove(function () {
        if (!fadeInBuffer) {
            if (timer) {
                clearTimeout(timer);
                timer = 0;
            }
            $('.fade-object').fadeIn();
            $('html').css({
                cursor: ''
            });
        } else {
            fadeInBuffer = false;
        }


        timer = setTimeout(function () {
            $('.fade-object').fadeOut()
            $('html').css({
                cursor: 'none'
            });
            fadeInBuffer = true;
        }, 5000)
    });
});

【讨论】：

由于某种原因这似乎不起作用...带有 .fade-object 的 div 在淡出后立即淡入。
已更新 - 出于某种原因，fadeout 似乎导致 mousemove 触发。所以我只有一个调用缓冲区，它在fadeout 之后忽略下一个mousemove。
哇，谢谢！ mousemove 触发很奇怪。出于某种原因，即使在小提琴中，光标仍然没有消失。这只是一个支持的东西吗？我正在使用最新版本的 Safari。
我也注意到了..我将其更改为更改 html 而不是 body。它似乎对我有用。
在各种浏览器上可能存在一些问题。使用此链接进行测试。 jsfiddle.net/qLvDD/1/embedded/result

【解决方案2】：

通过 jQuery 延迟应用 cursor: none。不要以为可以让它淡出。

此 css 属性的使用仅限于 Firefox 3+、Safari 5+ 和 Chrome 5+。它在 IE 中不受支持（如 here 所述）。

我在jsBin 放了一个例子，在我的浏览器中它不起作用（Linux 上的 Firefox 19.0.2），用尽可能多的浏览器测试它:)

无论如何，我不推荐这种技术，如果您认为鼠标光标是操作系统 UI 的一部分，那么向用户隐藏不属于您的 UI 的内容绝不是一个好主意。

【讨论】：