微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 非活动时淡出鼠标光标(使用jQuery)

我有一个带有类淡入淡出对象的元素,当鼠标处于非活动状态一定时间(在这种情况下为5000毫秒)时淡出,并在再次移动鼠标时淡入淡出.

这是我正在使用的代码

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

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

如何使鼠标光标以同样的方式淡入淡出,与我的淡入淡出对象div同步?

解决方法

在html的CSS中设置cursor:none并防止在淡出后直接发生的mousemove事件重新显示该项目.

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

原文地址:https://www.jb51.cc/jquery/158737.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐