7.jQuery之显示与隐藏效果

这里用到三个函数方法：show()   hide()  toggle()

注意点是三个方法里面的两个参数的使用，前一个参数是时间，表示显示速度；后一个参数是回调函数，只有前面的动画执行完之后，回调函数才会执行

 1     <style>
 2         div {
 3             width: 150px;
 4             height: 300px;
 5             background-color: pink;
 6         }
 7     </style>
 8     <button>显示</button>
 9     <button>隐藏</button>
10     <button>切换</button>
11     <div></div>
12     <script>
13         $(function () {
14             // $("button").eq(0).click(function () {
15             //     $("div").show(1000,function(){
16             //         alert(1)  // 注意show的用法，前面的显示速度，后面是回调函数，当动画执行完以后，再执行回调函数，从浏览器可以看到效果，下面的hide同理
17             //     })
18             // });
19             // $("button").eq(1).click(function () {
20             //     $("div").hide()
21             // })
22 
23             $("button").eq(2).click(function () {
24                 $("div").toggle()  // 这里的toggle也是有两个参数，方法同show
25             })
26 
27             // 一般情况下，我们都不加参数直接显示隐藏就可以了
28 
29         })
30     </script>

 

来源：https://www.cnblogs.com/jianguo221/p/11956519.html