Make hidden element appear for X seconds

Question

I simply try to show an hidden element for X seconds after I click on a button. I am able to make it appear, but not to let it dissapear again after X seconds have passed. I tried it with delay(X) but nothing happens.

$("#mybutton").on(
  "click",
  function() {
    $("#test").css("visibility", "visible");
    $("#test").delay(1000).css("visibility", "hidden");
  }
);

#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
  float: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">

<div id="mybutton">
  Button
</div>

JSFIDDLE: https://jsfiddle.net/75sttmxj/

Answer 1

Try to use setTimeout() at this context,

setTimeout(() => { $("#test").css("visibility", "hidden"); }, 1000 * 1000);

Since .delay() can delay the animation queue only.

DEMO

And if you don't want to use an arrow function to do that, then you could simply use normal anonymous function like below,

setTimeout(function(){ $("#test").css("visibility", "hidden"); }, 1000);