jQuery实现“弹层即消失”的最简单方法（用于提示性的弹层）

最新推荐文章于 2025-08-22 11:32:18 发布

iteye_19683

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量86

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_19683/article/details/82514014

本文介绍如何利用jQuery库实现网页元素的滑动显示与隐藏效果，并通过定时器自动控制元素的隐藏，同时展示了完整的HTML结构及样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $("#btn").click(function () {
 9                 $("#dv").slideToggle(200);
10                 setTimeout(function () {
11                     $("#dv").hide(200);
12                 }, 3000);
13             });
14 
15         });
16     </script>
17     <style type="text/css">
18         div.RoundedCorner
19         {
20             background: #C8E2FA;
21         }
22         b.rtop, b.rbottom
23         {
24             display: block;
25             background: #FFFFFF;
26         }
27         b.rtop b, b.rbottom b
28         {
29             display: block;
30             height: 1px;
31             overflow: hidden;
32             background: #C8E2FA;
33         }
34         b.r1
35         {
36             margin: 0 5px;
37         }
38         b.r2
39         {
40             margin: 0 3px;
41         }
42         b.r3
43         {
44             margin: 0 2px;
45         }
46         b.rtop b.r4, b.rbottom b.r4
47         {
48             margin: 0 1px;
49             height: 2px;
50         }
51         
52         #dv
53         {
54             width: 300px;
55 
56             position: absolute;
57             top: 10px;
58             left: 39%;
59             z-index: 10001;
60             padding: 0;
61         }
62         .shade
63         {
64             display: none;
65         }
66     </style>
67 </head>
68 <body>
69     <div id="dv" class="shade">
70         <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
71         </b></b>
72         <div style=" height:100px; text-align:center; background-color:#C8E2FA;">
73         <br /><br />
74             <div style="height:30px; font-weight: bold; font-size:16px; background-color:#C8E2FA;">
75 
76 
77                 修改成功!
78 
79 
80             </div>
81         </div>
82          <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2">
83         </b><b class="r1"></b></b>
84     </div>
85     <input type="button" id="btn" value="点击" />
86 </body>
87 </html>