javascript - 使隐藏元素出现 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

如果你不想使用箭头函数来做到这一点，那么你可以简单地使用普通的匿名函数，如下所示，

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