How do I let mouse hiding if inactive and inside a specific div ? I have the "html5gallery-box-0" div on my website, and I need the mouse to hide if the user let it idle over/inside the div after a couple of seconds. Here's the jsfiddle I'm working on.

And here's the js I'm using to hide the mouse when it's inactive.

$(function () {
    var timer;
    var fadeInBuffer = false;
    $(document).mousemove(function () {
        if (!fadeInBuffer) {
            if (timer) {
                console.log("clearTimer");
                clearTimeout(timer);
                timer = 0;
            }

                console.log("fadeIn");
            $('html').css({
                cursor: ''
            });
        } else {
            fadeInBuffer = false;
        }


        timer = setTimeout(function () {
            console.log("fadeout");
            $('html').css({
                cursor: 'none'
            });
            fadeInBuffer = true;
        }, 500)
    });
});

How do I let mouse hiding if inactive and inside a specific div ? I have the "html5gallery-box-0" div on my website, and I need the mouse to hide if the user let it idle over/inside the div after a couple of seconds. Here's the jsfiddle I'm working on.

And here's the js I'm using to hide the mouse when it's inactive.

$(function () {
    var timer;
    var fadeInBuffer = false;
    $(document).mousemove(function () {
        if (!fadeInBuffer) {
            if (timer) {
                console.log("clearTimer");
                clearTimeout(timer);
                timer = 0;
            }

                console.log("fadeIn");
            $('html').css({
                cursor: ''
            });
        } else {
            fadeInBuffer = false;
        }


        timer = setTimeout(function () {
            console.log("fadeout");
            $('html').css({
                cursor: 'none'
            });
            fadeInBuffer = true;
        }, 500)
    });
});

• javascript
• jquery
• css
• mouse-cursor

Share Improve this question Follow edited Dec 30, 2021 at 15:03 General Grievance 5,0433838 gold badges3737 silver badges5656 bronze badges asked Aug 4, 2015 at 0:36 Andrea CazzolaAndrea Cazzola 12711 gold badge33 silver badges1414 bronze badges 2

• So the code you currently have hides the cursor after the specified delay, but you want to know how to smoothly fade out the mouse cursor rather than just hiding it instantly? Or are you asking how to have it hide only if over that specified div? – nnnnnn Commented Aug 4, 2015 at 0:38
• My fault, I've just translated incorrectly, the problem is that with this code wherever the mouse is, it hide; and i need it to hide the cursor only if its idle inside the "html5gallery-box-0" div. – Andrea Cazzola Commented Aug 4, 2015 at 0:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

This will work

 $(function() {
    var timer;
    var fadeInBuffer = false;
    $(document).mousemove(function() {
        if (!fadeInBuffer && timer) {
            console.log("clearTimer");
            clearTimeout(timer);
            timer = 0;

            console.log("fadeIn");
            $('html').css({
                cursor: ''
            });
        } else {
            $('.html5gallery-box-0').css({
                cursor: 'default'
            });
            fadeInBuffer = false;
        }


        timer = setTimeout(function() {
            console.log("fadeout");
            $('.html5gallery-box-0').css({
                cursor: 'none'
            });

            fadeInBuffer = true;
        }, 2000)
    });
    $('.html5gallery-box-0').css({
        cursor: 'default'
    });
});

and here is the fiddle (if you want to change the idle time just do it, it's on 2 seconds now).

http://jsfiddle/eugensunic/1Lsqpm3y/4/