非活动时淡出鼠标光标（使用jQuery） [英] Fade out mouse cursor when inactive (with jQuery)

问题描述

我有一个类 fade-object 的元素，当鼠标在一定时间内不活动（在这种情况下为5000毫秒）时，该元素淡出，

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.

这是我使用的代码：

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

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

如何让鼠标光标以同样的方式，与我的 fade-object div同步？

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

推荐答案

在 html 的CSS中设置 cursor：none ，并阻止 mousemove c> fadeout 之后直接发生事件。

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.

a href =http://jsfiddle.net/qLvDD/1/ =nofollow>演示

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

这篇关于非活动时淡出鼠标光标（使用jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！