jQuery实现画面的展开、收起和停止

作者: 淡然27112971
来源: 51数据库
2021-08-16
主要用到动画效果中的三个操作
　　("#id").slidedown(3000)； // 后面的数字表示效果的时长
　　("#id").stop();
　　("#id").slideup(3000);
代码如下：
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>展开和收起</title>
 6     <script src="http://www.51sjk.com/Upload/Articles/1/0/267/267354_20210708015825721.js"></script>
 7     <script>
 8     $(document).ready(function(){
 9         $("#flip").click(function(){
10             $("#contain").slidedown(3000);
11         });
12         $("#stop").click(function(){
13             $("#contain").stop();
14         });
15         $("#pack-up").click(function(){
16             $("#contain").slideup(3000);
17         });
18     });
19     </script>
20      
21     <style>
22         
23         html,body{
24             margin: 0;
25             padding: 0;
26         }
27         #main{
28             width: 500px;
29             margin: 0 auto;
30         }
31         #btn>button{
32              border-radius: 4px;
33              font-size: 16px;
34              background: rgb(127, 28, 150);
35              color: rgb(223, 219, 219);
36              outline: none;
37              margin: 10px 0;
38         }
39 
40         #panel{
41             width: 300px;
42             color: #eee;
43             font-family: cursive;
44             text-align: center;
45         }
46        #title{
47            background-color: rgb(105, 24, 180);
48            font-size: 20px;
49        }
50         #contain{
51          background-color:blueviolet; 
52          padding: 20px auto;
53         }
54     </style>
55 </head>
56 <body>
57     <div id="main">
58         <div id="btn">
59             <button id="flip">展开</button>
60             <button id="stop">停止</button>
61             <button id="pack-up">收起</button>
62         </div>
63         <div id="panel">
64             <div id="title">初恋</div>
65             <div id="contain">当初相遇苹果林，<br>
66             你才挽起少女的发型。<br>
67                 前鬓插着如花的彩梳，<br>
68                 映衬着你的娟娟玉容。<br><br>
69                 
70                 你脉脉地伸出白净的手，<br>
71                 捧起苹果向我相赠。<br>
72                 淡红秋实溢清香啊！<br>
73                 正如你我的一片初衷。<br><br>
74                 
75                 我因痴情犹入梦境，<br>
76                 一声叹息把你的青丝拂动。<br>
77                 此时似饮合欢杯啊！<br>
78                 杯中斟满了你的恋情。<br><br>
79                 
80                 苹果林中树荫下，<br>
81                 何时有了弯弯的小径？<br>
82                 心中“宝塔”谁踏基？<br>
83                 耳边犹响着你的细语声声……<br><br>
84             </div>
85         </div>
86     </div>
87 </body>
88 </html>
结果：