11.jQuery之淡入淡出效果

Posted 2020-11-26 jianguo221

 知识点：fadeIn   fadeOut  fadeToggle  fadeTo

 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     <button>修改透明度</button>
13     <div></div>
14     <script>
15         $(function () {
16             $("button").eq(0).click(function () {
17                 // 淡入 fadeIn()
18                 $("div").fadeIn(1000);
19             })
20             $("button").eq(1).click(function () {
21                 // 淡出 fadeOut()
22                 $("div").fadeOut(1000);
23             })
24             $("button").eq(2).click(function () {
25                 // 淡入淡出切换 fadeToggle()
26                 $("div").fadeToggle(1000);
27             });
28             $("button").eq(3).click(function () {
29                 //  修改透明度 fadeTo() 这个速度和透明度要必须写
30                 $("div").fadeTo(1000, 0.5);
31             });
32         });
33     </script>