Fade out mouse cursor when inactive (with jQuery)

Question

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

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

Answer 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.