Fade out mouse cursor when inactive (with jQuery)

前端 未结 2 1198
囚心锁ツ
囚心锁ツ 2021-02-09 08:08

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

2条回答
  •  刺人心
    刺人心 (楼主)
    2021-02-09 08:31

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

提交回复
热议问题