CODEWITHSUNDEEP
javascriptjquerycssmouse-cursor
Danny Cooper
Danny Cooper

Reputation: 355

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?

Upvotes: 7

Views: 6764

Answers (2)

Kaizen Programmer
Kaizen Programmer

Reputation: 3818

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

Upvotes: 8

gpasci
gpasci

Reputation: 1440

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.

Upvotes: 7

Related Questions