jQuery实现弹出层3秒后自动消失

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现弹出层3秒后自动消失</title>
<script type="text/javascript" src="../jquery.js"></script>
</head>

<style>
.loginCoinBox{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
display: none;
}
.box1{
width: 500px;
height: 500px;
position: fixed;left: 50%; top: 25%;
margin-left: -250px;
border: 1px solid #000000;
}
</style>
<body>
<div class="loginCoinBox">
<div class="box1">
成功
</div>
</div>
<script type="text/javascript">
$(".loginCoinBox").show().delay(3000).hide(300);
</script>
</body>
</html>