我有一个带有类淡入淡出对象的元素,当鼠标处于非活动状态一定时间(在这种情况下为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事件重新显示该项目.
- $(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)
- });
- });
