Question

我有一个类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同步？

Answer 1

通过jQuery延迟应用cursor: none。不要以为它可能会逐渐淡出。

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

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

无论如何我不推荐这样的技术，如果你想到鼠标光标是操作系统UI的一部分，那么隐藏不属于你用户界面的用户就不是一个好主意。

Answer 2

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

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)
    });
});

非活动时淡出鼠标光标（使用jQuery）

2 个答案: