Javascript jQuery mousemove会自动启动

我正在尝试全屏播放视频播放器，我希望控件显示在

mousemove

上。由于没有

mousestop

我刚刚启动了一个计时器，如果计时器完成，它将隐藏工具

问题是——由于我怀疑回调的性质，效果会在显示和隐藏之间来回切换。类

mouseMoving

在css中用于添加

display:block！重要信息

当它被删除时，

控件

将返回其原始css，即

显示：无！重要信息

 $('#theDiv').mousemove(

        function()
        {
          //When the mouse is moving, add the class which adds display: block !important
          $('#theControls').addClass('mouseMoving');

          // Clear the timer each time the mouse moves, so that if the mouse doesnt move for a full 2 seconds,
          // hide the controls by removing the afforementioned class.

          clearTimeout(timer);

          var timer = setTimeout(

            function() 
            {
              $('#theControls').removeClass('mouseMoving');
            },

          2000);
        }
      );

事实上，如果您全屏移动鼠标，控件将出现，然后隐藏，然后开发工具将显示类

mouseMoving

不断被追加和删除，即使我不再移动鼠标。这将无限期地继续，或者直到再次移动鼠标，但随后循环重复

看看我的小提琴

基本上，以

为例！重要信息

关闭

显示的属性：无！重要的在css中的一部分，并将其放在
中的
显示：block
。mouseMoving
。您必须这样做的原因是，css的ID部分中的任何内容都会覆盖css的类部分。如果你不明白，就拿我的小提琴乱搞，或者问问题：D

然后，让你的Js看起来像我的小提琴

var timer;
$('#theDiv').mousemove(function() {
    //When the mouse is moving, add the class which adds display: block !important
    //console.log($('.mouseMoving'));
    $('#theControls').addClass('mouseMoving');

    // Clear the timer each time the mouse moves, so that if the mouse doesnt move for a full 2 seconds,
    // hide the controls by removing the afforementioned class.
    clearTimeout(timer);
    timer = window.setTimeout(function() {
        $('#theControls').removeClass('mouseMoving');
    }, 2000);
});

实际上，为了覆盖
！重要信息
在您的案例中，您需要做的就是使类选择器更加具体

就像你的
mouseMoving
类是

.mouseMoving {
    display:block !important;
}

将其更改为：

div#theControls.mouseMoving {
    display:block !important;
}

在定义
timer
之前，为什么要在
timer
上调用
clearTimer
？您不应该在闭包之外定义
计时器
，这样您就可以这样做吗？您是指
清除计时器
还是
清除超时
？因为
clearTimer
不存在，除非您定义了它。@ahitt6345我的意思是
clearTimeout
对不起，在上面更改了它。我无法删除
！重要信息
，否则控件将永远不会隐藏。代码中还有一些东西将内联样式放在工具上，即
display:block
，这就是我必须使用
的原因！重要提示
，以覆盖该选项。我正在使用一个已经建立的代码库，这就是为什么它很困难的原因。当您使用
$（'.mouseMoving'）.removeClass（）时，它也不起作用安装它最初的样子。第一次藏起来以后就再也不会出现了真的吗？如果不带参数执行
removeClass
，它只会删除与元素关联的所有类。