jQuery动画之淡入淡出效果

CSS代码：

<button id="fadeOut_button" type="button">淡出</button>

    <br>

    <button id="fadeIn_button" type="button">淡入</button>

    <br>

    <button id="fadeToggle_button" type="button">淡入与淡出之间切换</button>

    <br>

    <img src="../img/QQ截图20210325162809.jpg">

jQuery代码：

<script src="./jquery-1.8.3.min.js"></script>

    <script>

        $(function () {

            $("#fadeOut_button").click(

                function () {

                    //淡出

                    $("img").fadeOut("slow");//可以添加数字、slow、fast、normal

                }

            )

            $("#fadeIn_button").click(

                function () {

                    //淡入

                    $("img").fadeIn(5000);//可以添加数字、slow、fast、normal

                }

            )

 

            $("#fadeToggle_button").click(

                function () {

                    //淡入淡出切换

                    $("img").fadeToggle();//可以添加数字、slow、fast、normal

                }

            )

        })

    </script>