jquery div提示框渐隐弹出与隐藏效果

<!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><link rel="dns-prefetch" href="//www.jiangweishan.com"><link rel="dns-prefetch" href="//www.jiangweishan.comsearch.php"><link rel="dns-prefetch" href="//shang.qq.com"><link rel="dns-prefetch" href="//www.w3.org"><link rel="dns-prefetch" href="//ajax.googleapis.com"><link rel="dns-prefetch" href="//www.jb51.net"><link rel="dns-prefetch" href="//files.jb51.net"><link rel="dns-prefetch" href="//www.mockplus.cn"><link rel="dns-prefetch" href="//www.aliyun.com"><link rel="dns-prefetch" href="//pagead2.googlesyndication.com"><link rel="dns-prefetch" href="//weibo.com"><link rel="dns-prefetch" href="//beian.miit.gov.cn"><link rel="dns-prefetch" href="//hm.baidu.com"><link rel="dns-prefetch" href="//www.zblogcn.com"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title><a href="https://www.jiangweishan.com/tags/JQuery/" target="_blank">JQuery</a> div提示框渐隐弹出与隐藏</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><style> *{<a href="https://www.jiangweishan.com/tags/margin/" target="_blank">margin</a>:0;padding:0;<a href="https://www.jiangweishan.com/tags/font/" target="_blank">font</a>-size:12<a href="https://www.jiangweishan.com/tags/px/" target="_blank">px</a>;} <a href="https://www.jiangweishan.com/tags/input/" target="_blank">input</a>{<a href="https://www.jiangweishan.com/tags/width/" target="_blank">width</a>:120px;<a href="https://www.jiangweishan.com/tags/height/" target="_blank">height</a>:30px;<a href="https://www.jiangweishan.com/tags/cursor/" target="_blank">cursor</a>:po<a href="https://www.jiangweishan.com/tags/int/" target="_blank">int</a>er;} #note{<a href="https://www.jiangweishan.com/tags/position/" target="_blank">position</a>:absolute;width:400px;padding:20px;background:#eee;<a href="https://www.jiangweishan.com/tags/border/" target="_blank">border</a>:1px solid #ccc;left:40%;z-index:9999;display:none;} </style><script> $(<a href="https://www.jiangweishan.com/tags/function/" target="_blank">function</a>(){ $('input').click(function(){ if(!$('#note').is(':visible')){ $('#note').<a href="https://www.jiangweishan.com/tags/CSS/" target="_blank">CSS</a>({display:'<a href="https://www.jiangweishan.com/tags/block/" target="_blank">block</a>', top:'-100px'}).<a href="https://www.jiangweishan.com/tags/Animate/" target="_blank">Animate</a>({top: '+100'}, 500, function(){ <a href="https://www.jiangweishan.com/tags/setTimeout/" target="_blank">setTimeout</a>(out, 3000); }); } }); }); function out(){ $('#note').<a href="https://www.jiangweishan.com/tags/animate/" target="_blank">animate</a>({top:'0'}, 500, function(){ $(<a href="https://www.jiangweishan.com/tags/this/" target="_blank">this</a>).<a href="https://www.jiangweishan.com/tags/css/" target="_blank">css</a>({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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]