<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>