jQuery mousemove自己触发

Question

我想要一个视频播放器全屏，并且我想让控件在mousemove上显示。由于没有mousestop我刚启动了一个计时器，如果它完成，它将隐藏工具。

问题 - 由于我怀疑回调的性质，效果不断在显示和隐藏之间来回切换。该类mouseMoving在CSS中添加display: block !important，当它被删除，theControls返回到它的原始的CSS这是display: none !important

$('#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正在不断被追加和删除，即使我不再移动鼠标，。这将无限期地继续下去，或者直到鼠标再次移动，然后循环重复。

Answer 1

看看我的小提琴。 https://jsfiddle.net/Lfzt5u9j/37/

基本上采取!important属性可在CSS你display:none !important;部分，并把它放在display:block在.mouseMoving。你必须这样做的原因是因为你的css的ID部分中的任何内容都会覆盖你的css的CLASS部分。如果你没有得到它，请用我的小提琴弄乱或提问：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); 
}); 

实际上，为了覆盖所有!important你有你的情况做的是使类选择更具体。

一样，如果你对mouseMoving类是

.mouseMoving { 
    display:block !important; 
} 

将其更改为：

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