Fade out mouse cursor when inactive (with jQuery)

问题:

I have an element with class fade-object that fades out when the mouse is inactive for a certain amount of time (5000 milliseconds in this case), and fades back in when the mouse is moved again.

This is the code I'm using:

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

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

How do I make it so the mouse cursor fades in and out the same way, in sync with my fade-object div?

回答1:

Set cursor: none in the CSS of the html and prevent the mousemove event that occurs directly after a fadeout from re-displaying the item.

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

回答2:

Apply cursor: none via jQuery with a delay. Don't think it's possible to make it fade out.

The use of this css property is limited to Firefox 3+, Safari 5+, and Chrome 5+. It's not supported in IE (as stated here).

I've put an example at jsBin, in my browser it's not working (Firefox 19.0.2 on linux), test it with as many browser as you can :)

Anyway I can't recommend such a technique, it's never a good idea to hide something from the user that's not part of your UI, if you think about it the mouse cursor is part of the operative system UI.