2、JQuery进阶 - 爱码网

动画

三种方式显示和隐藏元素

默认显示和隐藏方式

　　show([speed,[easing],[fn]])

　　hide([speed,[easing],[fn]])

　　toggle([speed],[easing],[fn])

　　参数

　　　　speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)

　　　　easing：用来指定切换效果，可选参数，默认是"swing"（动画执行时效果是先慢，中间快，最后又慢），可用参数"linear"（动画执行时速度是匀速的）

　　　　fn：可选参数，在动画完成时执行的函数，每个元素执行一次

滑动显示和隐藏方式

　　slideDown([speed],[easing],[fn])

　　slideUp([speed,[easing],[fn]])

　　slideToggle([speed],[easing],[fn])

淡入淡出显示和隐藏方式

　　fadeIn([speed],[easing],[fn])

　　fadeOut([speed],[easing],[fn])

　　fadeToggle([speed,[easing],[fn]])

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>


    <script>
        //隐藏div
        function hideFn(){
            //默认方式
            $("#showDiv").hide(5000,"swing", function(){
                console.log("隐藏div");
            });
        }

        //显示div
        function showFn(){
            //默认方式
            $("#showDiv").show(5000,"linear");
        }


        //切换显示和隐藏div
        function toggleFn(){
            //默认方式
            $("#showDiv").toggle("slow");

        }
    </script>

</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>

示例