<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jquery div提示框渐隐弹出与隐藏</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
        * {
margin: 0;
padding: 0;
font-size: 12px;
        }

input {
width: 120px;
height: 30px;
cursor: pointer;
        }

#note {
position: absolute;
width: 400px;
padding: 20px;
background: #eee;
border: 1px solid #ccc;
left: 40%;
z-index: 9999;
display: none;
        }
</style>
<script>
$(function () {
$('input').click(function () {
if (!$('#note').is(':visible')) {
$('#note').css({display: 'block', top: '-100px'}).animate({top: '+100'}, 500, function () {
setTimeout(out, 3000);
                    });
                }
            });
        });

function out() {
$('#note').animate({top: '0'}, 500, function () {
$(this).css({display: 'none', top: '-100px'});
            });
        }
</script>
</head>
<body>

<div id="note"><a href="http://www.jb51.net" target="_blank">脚本之家</a></div>
<input type="button" value="点我，30s后消失">

</body>
</html>