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

Question

I'm making my own video player with an info div on the top and a playbar div in the bottom.

These bars should disappear in 5 seconds if any buttons are pressed and if you press a button these bars should appear (if they are hidden) or stay for 5 seconds more.

At first i thought in something like this

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

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

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

   };

But of course each time a button is pressed you add a setTimeOut function to the queue, so after 5 seconds the bars starts to hide and show.

I need to avoid this with something like "restart" the SetTimeOut when i press a button instead to "load" a new.

This is a simple example: Demo

Is this possible? or I need to use something different to setTimeOut?

Thanks in advance.

Answer 1

Yes, it's possible, you can use window.clearTimeout(yourTimeOutVariable) to clear previous timeouts. Check your demo, updated

You can read more about it here http://www.w3schools.com/jsref/met_win_cleartimeout.asp

Answer 2

Try this:

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

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

     };

  };
});