11.jQuery之淡入淡出效果

知识点：fadeIn   fadeOut  fadeToggle  fadeTo

     <style>
         div {
             width: 150px;
             height: 300px;
             background-color: pink;
             display: none;
         }
     </style>
     <button>淡入效果</button>
     <button>淡出效果</button>
     <button>淡入淡出切换</button>
     <button>修改透明度</button>
     <div></div>
     <script>
         $(function () {
             $("button").eq(0).click(function () {
                 // 淡入 fadeIn()
                 $("div").fadeIn(1000);
             })
             $("button").eq(1).click(function () {
                 // 淡出 fadeOut()
                 $("div").fadeOut(1000);
             })
             $("button").eq(2).click(function () {
                 // 淡入淡出切换 fadeToggle()
                 $("div").fadeToggle(1000);
             });
             $("button").eq(3).click(function () {
                 //  修改透明度 fadeTo() 这个速度和透明度要必须写
                 $("div").fadeTo(1000, 0.5);
             });
         });
     </script>