JQuery动画

三种方式显示和隐藏元素

1.默认显示和隐藏元素

show([speed,[easing],[fn]])
- 参数
  - speed:动画的速度三个预定义的值（“slow”,”normal”,”fast”）或者表示动画时长达到毫秒值（如:1000）
  - easing:用来指定切换效果默认是“swing”,可用参数“linear”
    - swing:动画执行时效果时先慢中间快最后又慢
    - linear:动画执行时速度时匀速的
  - fn:在动画完成时执行的函数每个元素执行一次
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
        
        <script>
            //隐蔽div
            function hideFn(){
                $("#showDiv").hide(5000,"swing");
            }
            
            //显示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>

运行结果

2.滑动显示和隐藏方式

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

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
        
        <script>
            //隐蔽div
            function hideFn(){
                //$("#showDiv").hide(5000,"swing");
                //滑入方式
                $("#showDiv").slideUp("slow")
            }
            
            //显示div
            function showFn(){
                //$("#showDiv").show(5000,"linear");
                //滑入方式
                $("#showDiv").slideDown("slow");
            }
            //切换显示和隐藏div
            function toggleFn(){
                //默认方式
                //$("#showDiv").toggle("slow");
                //滑入方式
                $("#showDiv").slideToggle("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>

运行结果

3.淡入淡出显示和隐藏方式

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

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
        
        <script>
            //隐蔽div
            function hideFn(){
                //$("#showDiv").hide(5000,"swing");
                //滑入方式
                //$("#showDiv").slideUp("slow")
                
                //淡入方式
                $("#showDiv").fadeOut("slow")
            }
            
            //显示div
            function showFn(){
                //$("#showDiv").show(5000,"linear");
                //滑入方式
                //$("#showDiv").slideDown("slow");
                
                //淡出方式
                $("#showDiv").fadeIn("slow");
            }
            //切换显示和隐藏div
            function toggleFn(){
                //默认方式
                //$("#showDiv").toggle("slow");
                //滑入方式
                //$("#showDiv").slideToggle("slow");
                
                //淡出方式
                $("#showDiv").fadeToggle("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>