如果按下任何按钮，自动隐藏 div

Question

我正在制作自己的视频播放器，顶部有一个信息 div，底部有一个播放栏 div。

如果按下任何按钮，这些条应该在 5 秒内消失，如果您按下某个按钮，这些条应该出现（如果它们是隐藏的）或多停留 5 秒。

一开始我是这么想的

  document.onkeyup = function(event) {
    showBar('playbarDiv');
    showBar('infoDiv');

    setTimeout(function() {
     hideBar(); 
    }, 5000);

    if (hideCounter !== 1){
     focusOn('playButton');
     hideCounter = 1;
    }

   };

当然，每次按下按钮时，您都会向队列中添加一个 setTimeOut 函数，因此 5 秒后条形开始隐藏和显示。

当我按下一个按钮而不是 "load" 一个新按钮时，我需要使用 "restart" SetTimeOut 之类的东西来避免这种情况。

这是一个简单的例子：Demo

这可能吗？或者我需要使用与 setTimeOut 不同的东西？

提前致谢。

Answer 1

是的，有可能，您可以使用 window.clearTimeout(yourTimeOutVariable) 清除以前的超时。检查 your demo, updated

您可以在此处阅读更多相关信息 http://www.w3schools.com/jsref/met_win_cleartimeout.asp

Answer 2

试试这个：

    jQuery(document).ready(function(){
  document.onkeyup = function(event) {

    if($("#content").not(":visible")){
        $("#content").fadeIn(500);
                setTimeout(function() { $("#content").fadeOut(500); }, 5000);

     };

  };
});

如果按下任何按钮，自动隐藏 div

Autohide a div if any buttons are pressed

html

javascript

css

jquery

timeout