jquery右下角自动弹出关闭层

JavaScript

右下角弹出层后，会在一定时间后自动隐藏。

效果演示

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>jquery右下角自动弹出关闭层-爱博说</title>
<meta name="keywords" content="pdbn.top" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
a {color:black;
}
#keleyislide {
width: 300px;
height: 200px;
border: 1px solid #000;
position: fixed;
bottom: 2px;
right: 2px;
display: none;
background-color: White;
z-index:9999;
}

#keleyislide a {
position: absolute;
top: 8px;
right: 8px;
font-size: 12px;
text-decoration: none;
color: Blue;
}

#keleyislide h2 {
font-size: 24px;
text-align: center;
font-family: "微软雅黑";
}

#reshow {
position: fixed;
right: 2px;
bottom: 2px;
font-size: 12px;
display: none;
background-color: White;
cursor: pointer;
border: 1px solid #000;
}
</style>
</head>

<body>
<div id="reshow">展开消息</div>
<div id="keleyislide">
<a href="javaScript:void(0)" id="close" target="_self">关闭</a>
<span style=" line-height:50px;">欢迎访问我的博客<br />pdbn.top</span>
</div>
<script type="text/javascript">
function Jihua_Cnblogs_Com() { 
$("#keleyislide").slideDown("slow"); 
$("#reshow").hide(); 
}
function KeleyiAutoHide() { 
$("#keleyislide").slideUp("slow"); 
$("#reshow").show(); 
}

$(document).ready(function () {
setTimeout(function () {
Jihua_Cnblogs_Com();
}, 1000)
setTimeout(function () { KeleyiAutoHide(); },9000)
$("#close").click(function () {
KeleyiAutoHide();
})
$("#reshow").mouseover(function () {
Jihua_Cnblogs_Com(); 
})
})
</script>
</body>
</html>