8.jQuery之上下滑动效果

上下滑动：slideDown slideUp slideToggle

 1     <style>
 2         div {
 3             width: 150px;
 4             height: 300px;
 5             background-color: pink;
 6             display: none;
 7         }
 8     </style>
 9     <button>下拉滑动</button>
10     <button>上拉滑动</button>
11     <button>切换滑动</button>
12     <div></div>
13 
14     <script>
15         $(function () {
16             $("button").eq(0).click(function () {
17                 $("div").slideDown(1000);
18             })
19 
20             $("button").eq(1).click(function () {
21                 $("div").slideUp(1000)
22             })
23 
24             $("button").eq(2).click(function () {
25                 $("div").slideToggle(1000)
26             })
27         })
28     </script>