使隐藏元素显示X秒

Question

我点击一个按钮后,我只是尝试在X秒内显示一个隐藏元素.我能够让它出现,但不要让它在X秒过后再次消失.我尝试过delay(X)但没有任何反应.

$("#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

尝试setTimeout()在这种情况下使用,

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

因为.delay()只能延迟动画队列.

DEMO

如果你不想使用它arrow function来做那个,那么你可以简单地使用正常anonymous function如下,

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