JS学习二十一：JQ中的动画

 

一、显示与隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script>
        <style type="text/css">
            #box {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <button id="btn1">隐藏</button>
        <button id="btn2">显示</button>
        <script type="text/javascript">
            // 原生JS
//             document.getElementById("btn1").onclick = function(){
//                 document.getElementById("box").style.display = "none"
//             }

            var $div = $("#box")
            // JQ方式一: hide()无参数
//             $("#btn1").click(function() {
//                 $div.hide()
//             })
            // JQ方式二: hide(speed[, callback])
//             $("#btn1").click(function() {
//                 $div.hide(1000)
//             })
            // slow对应600毫秒,normal对应400,fast对应200
            $("#btn1").click(function() {
                $div.hide("slow", function() {
                    console.log("动画结束")
                })
            })
            
            // JQ显示的方法:show
            $("#btn2").click(function() {
                $div.show("slow", function() {
                    console.log("动画开始")
                })
            })
        </script>
    </body>
</html>

 

使用一个按钮控制显示与隐藏：toggle()方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script>
        <style type="text/css">
            #box {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <button id="btn">切换状态</button>
        <script type="text/javascript">
            var $div = $("#box")
            $("#btn").click(function() {
                $div.toggle("slow", function() {
                    console.log("动画切换")
                })
            })
        </script>
    </body>
</html>

 

 

二、淡入淡出效果

fadeOut()方法--淡出、fadeIn（）方法--淡入。

透明度：fadeTo（时间毫秒，透明度），如fadeTo(1000, 0.1)，在1秒内透明度变为0.1

一个按键控制淡入淡出：fadeToggle

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script>
        <style type="text/css">
            #box {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <button id="btn1">隐藏</button>
        <button id="btn2">显示</button>
        <button id="btn3">透明</button>
        <button id="btn">切换状态</button>
        <script type="text/javascript">
            var $div = $("#box")
            $("#btn1").click(function() {
                $div.fadeOut("slow", function() {
                    console.log("动画结束")
                })
            })
            $("#btn2").click(function() {
                $div.fadeIn("slow", function() {
                    console.log("动画开始")
                })
            })
            $("#btn3").click(function() {
                $div.fadeTo(1000, 0.1)
            })
            $("#btn").click(function() {
                $div.fadeToggle(1000)
            })
        </script>
    </body>
</html>

 

 

三、滑动地隐藏与显示，滑动的淡入淡出

滑动的收缩：slideUp()

滑动的展开：slideDown()

一键滑动的收缩与展开：slideToggle()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script>
        <style type="text/css">
            #box {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <button id="btn1">隐藏</button>
        <button id="btn2">显示</button>
        <button id="btn3">透明</button>
        <button id="btn">切换状态</button>
        <script type="text/javascript">
            var $div = $("#box")
            $("#btn1").click(function() {
                $div.slideUp("slow", function() {
                    console.log("动画结束")
                })
            })
            $("#btn2").click(function() {
                $div.slideDown("slow", function() {
                    console.log("动画开始")
                })
            })
            $("#btn3").click(function() {
                $div.fadeTo(1000, 0.1)
            })
            $("#btn").click(function() {
                var self = $(this)  // 这里的this代表btn按钮,通过变量传递
                $div.slideToggle(1000, function() {
                    $(self).text("onOff")
                })
            })
        </script>
    </body>
</html>

 

 

四、自定义动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script>
        <style type="text/css">
            #box {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body style="position: relative;">
        <div id="box" style="position: absolute;left: 0;top: 0;"></div>
        <button id="btn">按钮</button>
        <button id="btn2">动画是否在执行</button>
        <script type="text/javascript">
            var $div = $("#box")
            // animate(params[,speed][,callback])
            // $div.animate({left: "200px"}, 1000).animate({top: "200px"}, 1000)
//             $div.animate({left: "200px", top: "200px", opacity: "0.5"}, 1000).delay(1000).animate(
//             {left: "400px"}, 1000)

            var a = $div.animate({left: "200px", top: "200px", opacity: "0.5"}, 5000).delay(1000).animate(
            {left: "400px"}, 5000)
            $("#btn").click(function(){
                // a.stop(true, true)
                // 第一个参数:停止时，是否清空动画的队列
                // a.stop(false, true)
                // 第二个参数:停止时，是否到动画结束的地方
                a.stop(false, true)
            })
            // left,top的值,还可以使用+=100px,-=100px,在上个位置的基础上加减多少
            
            // 判断动画是否在执行
            $("#btn2").click(function() {
                if (a.is(":animated")) {
                    console.log("动画在执行中.....")
                }
            })
        </script>
    </body>
</html>

 

posted on 2018-12-09 18:14  myworldworld  阅读(123)  评论(0)    收藏  举报

导航