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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery div提示框渐隐弹出与隐藏</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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> 脚本之家 <input type="button" value="点我，30s后消失" /> </body> </html>

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