Question

我有一些媒体。在此之上，当用户的鼠标空闲时，我想要隐藏一组控件。然后，如果用户移动鼠标，我希望它们重新出现。

我的问题是当控件消失时，它们会在父控件上触发mousemove事件。这会导致控件重新出现。

这是JS代码：

(function($) {
  var timer = null;
  $('.outer').mousemove(function() {
    $('.inner').fadeIn('slow');

    if (timer) {
      window.clearInterval(timer);
    }
    timer = window.setTimeout(function() {
      $('.inner').fadeOut('slow');
    }, 3000);
  });
})(jQuery);

这是一个小提琴：https://jsfiddle.net/8oduhs96/

现在，小提琴的结构看起来更像我的项目。我不具备更改标记的灵活性，因此首选JS和/或CSS解决方案。

您可以取消注释CSS的下部块，看看问题只发生在鼠标位于蓝色区域时。

Answer 1

使用CSS和不透明度/可见性隐藏元素，它们不会触发DOM的修改（作为jQuery display:none/block;的{{1}}效果）

https://jsfiddle.net/8oduhs96/8/

Answer 2

您可以添加一项检查以查看该元素是否可见。

(function($) {
  var timer = null;
  $('.outer').mousemove(function() {
    console.log('MouseOver');
    if($('.inner').is(':visible')){
      console.log('Triggered');
      $('.inner').fadeIn('slow');

      if (timer) {
        window.clearInterval(timer);
      }
      timer = window.setTimeout(function() {
        $('.inner').fadeOut('slow');
      }, 3000);
    }
  });
})(jQuery);

Answer 3

正如迈克尔在对他的答案的评论中所建议的那样，我通过使用超时从UX的角度解决了这个问题。

如果那里的其他人知道如何，我仍然会更喜欢没有超时的解决方案。

(function($) {
  var timer = null;

  function setupOuter() {
    $('.outer').mousemove(function() {
      $('.inner').fadeIn('slow');  
      $('.outer').off('mousemove');
    });
  }
  setupOuter();

  $('.inner').mousemove(function() {
    if (timer) {
      window.clearInterval(timer);
    }
    timer = window.setTimeout(function() {
      $('.inner').fadeOut('slow', function() {
        window.setTimeout(setupOuter, 500);
      });
    }, 3000);
  });
})(jQuery);

如何防止div在其隐藏

3 个答案: