如果按下任何按钮，则自动隐藏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秒后，条形图开始隐藏和显示。

我需要避免这种情况，像"重启"SetTimeOut当我按下一个按钮，而不是"加载"一个新的。

这是一个简单的例子:Demo

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

Answer 1

是的，这是可能的，您可以使用window.clearTimeout(yourTimeOutVariable)清除以前的超时。检查你的演示，更新

您可以在这里阅读更多信息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);
     };
  };
});