jQuery mousemove自燃

Question

我正在尝试一个视频播放器全屏，我希望控制显示在mousemove上。由于没有mousestop，我只是启动了一个计时器，如果它完成了，它将隐藏这些工具。

问题- due到了我怀疑的回调的本质，它的效果一直在显示和隐藏之间来回切换。在css中使用类mouseMoving来添加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);
        }
      );

事实上，如果您转到全屏并移动鼠标，控件将出现，然后隐藏，然后dev工具将显示类mouseMoving不断被追加和删除，即使我不再移动鼠标。这将无限期地继续下去，或者直到鼠标再次移动，但是循环会重复。

Answer 1

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

基本上，将!important属性从css中的display:none !important;部件中取出，并将其放在.mouseMoving中的display:block上。之所以要这样做，是因为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);
});

实际上，为了覆盖!important，在您的情况下所要做的就是使类选择器更加具体。

就像您的mouseMoving类是

.mouseMoving {
    display:block !important;
}

改为：

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