一、基本动画效果

（一）隐藏、显示： hide、show、toggle，

可以带有参数：1、指定速度的字符串：“slow”、“normal”、“fast”；2、表示时长的毫秒数，1000=1秒；3、可以回调函数，在指定事件完成效果后，调用的函数；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            margin:0;
        }
        div{
            width:400px;
            height:300px;
            margin:0 auto;
            border:1px solid red;
            display:none;
        }
        .y{
            background:yellow;
        }
    </style>

</head>
<body>
    <input  class="h" type="button" value="隐藏" />
    <input  class="s" type="button" value="显示" />
    <input  class="t" type="button" value="切换" />
    <div>
        <p>hide、show、toggle</p>
        <p>fadein、fadeout、fadetoggle、fadeto</p>
        <p>slideDown、slideUp、slideToggle</p>
    </div>

    <script>
    //显示、隐藏
        /*//$("div").click(function(){$(this).hide()});
        //$("div").show();
        //$("div").show("slow");
        //$("div").show("fast");
        //$("div").show(1000);
        //$("div").show(1000,function(){$(this).addClass("y")});*/
        $(".h").click(function(){$("div").hide()});
        $(".s").click(function(){$("div").show()});
        $(".t").click(function(){$("div").toggle()});
    </script>
</body>
</html>
View Code

（二）淡入、淡出： fadeIn、fadeOut、fadeTo、fadeToggle

1、可以同样的方式，设置动画时间；2、可以回调函数；3、fadeTo设置整体透明度，0-1之间，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            margin:0;
        }
        div{
            width:400px;
            height:300px;
            margin:0 auto;
            border:1px solid red;
            display:none;
        }
        .y{
            background:yellow;
        }
    </style>

</head>
<body>
    <input  class="dr" type="button" value="淡入" />
    <input  class="dc" type="button" value="淡出" />
    <input  class="qh" type="button" value="切换" />
    <input  class="tm" type="button" value="透明" />
    <div>
        <p>hide、show、toggle</p>
        <p>fadein、fadeout、fadetoggle、fadeto</p>
        <p>slideDown、slideUp、slideToggle</p>
    </div>

    <script>
        $(".dr").click(function(){$("div").fadeIn("slow")});
        $(".dc").click(function(){$("div").fadeOut(500)});
        $(".qh").click(function(){$("div").fadeToggle()});
        $(".tm").click(function(){$("div").fadeTo(200,0.5)});
    </script>
</body>
</html>
View Code

（三）滑动：slideDown、slideUp、slideToggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            margin:0;
        }
        div{
            width:400px;
            height:300px;
            margin:0 auto;
            border:1px solid red;
            display:none;
        }
        .y{
            background:yellow;
        }
    </style>

</head>
<body>
    <input  class="dr" type="button" value="滑动入" />
    <input  class="dc" type="button" value="滑动出" />
    <input  class="qh" type="button" value="切换" />
    <div>
        <p>hide、show、toggle</p>
        <p>fadein、fadeout、fadetoggle、fadeto</p>
        <p>slideDown、slideUp、slideToggle</p>
    </div>

    <script>
        $(".dr").click(function(){$("div").slideDown("slow")});
        $(".dc").click(function(){$("div").slideUp(500)});
        $(".qh").click(function(){$("div").slideToggle()});
    </script>
</body>
</html>
View Code

二、自定义动画

1、animate（{·}）自定义动画，为指定对象添加结果样式，样式仅限于位置、尺寸、透明度，可以进行累加、累减，

2、基本动画和自定义动画，都可以回调函数，利用回调函数可以实现不同对象的 “列队动画”，

　  注意：链式操作中，不同对象的非动画操作，如CSS，是并发进行的，不能呈现逐次的效果，需要使用回调函数，

3、动画和非动画之间，可以使用queue（next）列队，next可以省略，也可以指代下一个列队的动画，

4、自定义动画中，有一个运动参数easing，调整运动帧数，swing缓慢、linear匀速；

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.12.4.min.js"></script>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position:absolute;
        }
        #pox{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 200px;
        }
    </style>
</head>
<body>
    <div id="box">box</div>
    <div id="pox">pox</div>

    <script>
        $('#box').animate({left:'800px'},3000,'swing'); //swing 表示缓动运行，中间快，两头慢
        $('#pox').animate({left:'800px'},3000,'linear');//linear表示匀速运行，速度一直不变
    </script>
</body>
</html>
View Code

三、动画停止、延迟

1、stop（）停止第一个动画，stop（true）全部动画停止在当前位置，stop（true，true）全部动画停止在结束位置，

2、finish（）：停止全部动画，停止在全部动画结束位置，=stop（true），

3、delay（time）：动画延迟time时间运行

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.12.4.min.js"></script>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position:absolute;
        }
        #pox{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 200px;
        }
    </style>
</head>
<body>
    <input type="button" class="button" value="开始" />
    <input type="button" class="stop" value="停止" />
    <input type="button" class="ani" value="查找运动中的动画" />
    <div id="box">box</div>
    <div id="pox">pox</div>

    <script>
        $(function(){
        //////////////////////基本功能/////////////////////////////////
            //要想使用left top bottom right这种方向性的属性 先必须对"#box元素设置CSS绝对定位,
            $(".button").click(function (){
                $("#box").animate({left: "300px"})
            });
            //自定义动画，默认从初始位置或初始状态开始，想通过当前位置或状态下开始，使用累加、累减功能，
            $(".button").click(function (){
                $("#box").animate({left: "+=50px"})
            });
        ///////////////////////同步动画////////////////////////////////////////
            //下面四个css属性值并发、同时变化，
            $(".button").click(function(){
                $("#box").animate({width: "300px",height: "200px",opacity:0.5,fontSize:"200px",})
            });
        /////////////////////////列队动画///////////////////////////////////////////
            //多个对象，使用回调函数
            $(".button").click(function (){
                $("#box").animate({width:"300px"},1000,function(){
                    $("#pox").animate({height:"200px"},1000,function(){
                        $("#box").animate({opacity:0.5},1000,function(){
                            $("#pox").animate({fontSize:"150px"},1000,function(){
                                alert("完毕");
                            });
                        });
                    });
                });
            });
            //一个对象，使用链式调用
            $(".button").click(function(){
                $("#box")
                    .animate({width:"300px"},1000)
                    .animate({height:"200px"},1000)
                    .animate({opacity:0.5},1000)
                    .animate({fontSize:"150px"},1000,function(){alert("列队动画执行完毕");});
            });
        ///////////////////////////////动画与非动画列队：queue//////////////////////////////////
            //问题：非动画与动画同时执行，不能直接列队，
            $(".button").click(function(){
                $("#box")
                    .slideUp(1000)
                    .slideDown(1000)
                    .css("background","yellow");    //与前面动画同时执行，
            });
            //答案一：非动画作为动画的回调函数，可读性差，
            $(".button").click(function(){
                $("#box")
                    .slideUp(1000)
                    .slideDown(1000,function(){$(this).css("background","yellow")})
                    .hide(3000);
            });
            //答案二：queue()，后面不能直接继续列队动画，需要使用参数next，
            $(".button").click(function(){
                $("#box")
                    .slideUp(1000)
                    .slideDown(1000)
                    .queue(function(){$(this).css("background","yellow");})
            });
            $(".button").click(function(){
                $("#box")
                    .slideUp(1000)
                    .slideDown(1000)
                    .queue(function(next){
                        $(this).css("background","yellow");
                        next();
                    })
                    .hide(1000);
            });
            $(".button").click(function(){
                $("#pox").slideUp(1000,function(){
                    $("#pox").slideDown(1000,function(){
                        $("#pox").queue(function(next){
                            $(this).css("background","yellow");
                            next();
                        });
                        $("#box").hide(1000);
                    });
                });
            });

        /////////////////////////////////清除列队动画////////////////////////////////////
            //clearQueue()，把它放入列队的回调函数或queue方法里，可以把剩下未执行的列队删除，
            $(".button").click(function(){
                $("#box")
                    .slideUp(1000)
                    .slideDown(1000,function(){$(this).clearQueue()})//此后的列队动画被删除
                    .queue(function(next){$(this).css("background","yellow");next();})
                    .hide(1000);
            });

        ///////////////////列队动画的长度//////////////////////////////////////////
            //语法：$(selector).queue("fx").length，fx是默认列队的参数，
            function getQueueCount(){
                return $("#box").queue("fx").length;
            }
            $(".button").click(function(){
                $("#box")
                    .slideUp(1000,function(){alert(getQueueCount())})
                    .slideDown(2000,function(){alert(getQueueCount())})
                    .queue(function(next){$(this).css("background","yellow");next();})
                    .hide(2000,function(){alert(getQueueCount())});
            });
        //////////////////停止动画//////////////////////////////////////////////
            //stop(true,true)，参数一表示清空未执行完的动画列队，参数二表示直接将正在执行的动画跳转到末状态，
            $(".button").click(function(){
                $("#box").animate({left:"300px"},1000)
                   .animate({bottom:"300px"},1000)
                   .animate({width:"300px"},1000)
                   .animate({height:"300px"},1000);
            });
            //$(".stop").click(function(){$("#box").stop();})             //第一个动画停止，后面继续执行
            //$(".stop").click(function(){$("#box").stop(true,true);})    //全部动画停止，停在最终位置
            $(".stop").click(function(){$("#box").stop(true);})         //全部动画停止，停在当前位置
        })
        ///////////////////动画的延迟//////////////////////////////////////////////////
            //delay(time),在此停留time时间，在进行后续操作
            $(".button").click(function(){
                $("#box").delay(2000)
                    .animate({left:"300px"},1000)
                    .animate({bottom:"300px"},1000)
                    .animate({width:"300px"},1000).delay(3000)
                    .animate({height:"300px"},1000);
        });

    </script>
</body>
</html>
View Code

4、$.fx.off = true；关闭当前页面上所有动画，

四、提取当前正在执行的动画：$（“：animated”）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.12.4.min.js"></script>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position:absolute;
        }
        #pox{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 200px;
        }
    </style>
</head>
<body>
    <input type="button" class="button" value="开始" />
    <input type="button" class="ani" value="查找运动中的动画" />
    <div id="box">box</div>
    <div id="pox">pox</div>

    <script>
        $(function(){
            $(".button").click(function(){
                $("#box").slideUp(1000,function abc(){$(this).slideToggle(1000,abc);}); //自执行
            });
            $(".ani").click(function(){
                $(":animated").css("background","blue").stop(true);
            });
        });
    </script>
</body>
</html>
View Code