Javascript 使 Div 在鼠标按下后出现 2 秒

Question

我在创建一个隐藏的彩色 block 时遇到了问题，然后在按下鼠标后出现(没有具体的地方，页面上的任何地方)，然后在那里停留 2 秒然后再次消失......直到又一次按下鼠标，整个事情又发生了。一直在试验“.click(function”和其他东西，但没能让它发挥作用。

目前我有一个像这样的 DIV 层......

HTML:

<div class="overlay"></div>

CSS:

.overlay {
position: absolute; 
z-index: 1000;
right: 240px;
top: 500px;
width: 1000px;
height: 100px;
background: rgba(255, 255, 200, 100);
}

我对 javascript 很陌生，所以任何建议都会很有帮助。

Answer 1

你可以在 jQuery 中使用 setTimeout

$( "#target" ).on( "click", function() {
  $("#messageBox").hide().slideDown();
  setTimeout(function(){
      $("#messageBox").hide();        
  }, 2000);
});

#messageBox {
    display:inline-block;
 float:right;
 border:1px solid #060;
 background:#FFC;
 padding:10px 20px;
 box-shadow:2px 2px 4px #666;
 color:#060;
 font-weight:bold;
 display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="messageBox">
  Hi there.
</div>
<input type="button" id ="target" value="click"/>