HTML 学习笔记 JQuery（animation）

动画效果也是JQuery库吸引人的地方，通过JQuery的动画方法，能够轻松的为网页天假非常紧菜的视觉效果。

show()方法和hide()方法

show()方法和hide()方法是JQuery中最基本的动画方法。在HTML文档中，当一个元素调用hide()方法，将会为该元素的"display"样式改为"none"。

例如使用如下代码隐藏element元素

$("element").hide(); //通过hide()方法隐藏元素

这段代码的功能与用css()方法设置display属性的效果相同

$("element").css("display","none");//通过css()方法隐藏元素

当把元素隐藏后，可以使用show()方法将元素的display样式设置为缘来的显示状态("block"或者"inline"或除了"none"之外的值)

$("element").show();

下面看一个简单的例子

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                background: #ece023;
                width: 50px;
                height: 50px;
                margin: 2px;
                float: left;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <!--<p>Hello</p>-->
        <!--<button id="hide">隐藏</button>
        <button id="show">显示</button>
        <button id="toggle">隐藏／显示</button>-->
        <script>
//            $(function() {
//                $("#hide").click(function() {
//                    $("p").hide(1000);
//                });
//                $("#show").click(function() {
//                    $("p").show(1000);
//                });
//                $("#toggle").click(function() {
//                    $("p").toggle(1000);
//                });
//            });
        for (var i = 0;i < 5; i++) {
            $("<div>").appendTo(document.body);
        }
        $("div").click(function() {
            $(this).hide(2000);
        });
        </script>
    </body>
</html>

hide(2000)或者show(2000)参数2000是指定动画的时间，以毫秒为单位。值得注意的是当一个元素调用hide()时，虽然隐藏了，但是还存在在DOM当中，如果需要我们有必要将其移除出DOM,代码如下。

$("div").click(function() {
    $(this).hide(2000,function() {
        $(this).remove();
    })
});

另外要说的一点就是，当元素调用hide()方法在将display属性设置为"none"之前，会记住原来的display属性，当调用show()方法时，恢复为原来的display属性。

fadeIn()方法和 fadeOut()方法

与show()方法不同的是，fadeIn()方法和fadeOut()方法之改变元素的不透明度。fadeOut()方法会在指定的一段时间内提高元素的透明度，直至元素完全消失(display：none)。 fadeIn()方法则相反。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <div id="div1" style="width: 80px; height: 80px; background-color: aqua; display: none;"></div>
        <div id="div2" style="width: 80px; height: 80px; background-color: #ECE023;display: none;"></div>
        <div id="div3" style="width: 80px; height: 80px; background-color: brown;display: none;"></div>
        <button id="fadeBtn">淡入</button>
        <button id="fadeOutBtn">淡出</button>
        <button id="fadetogger">淡入淡出</button>
        <button id="fadeto">fadeto</button>
        <script>
            $("#fadeBtn").click(function() {
                $("#div1").fadeIn(1000);
                $("#div2").fadeIn(1000);
                $("#div3").fadeIn(1000);
            });
            $("#fadeOutBtn").click(function() {
                $("#div1").fadeOut(1000);
                $("#div2").fadeOut(1000);
                $("#div3").fadeOut(1000);
            });
            //一个按钮实现淡入淡出效果
            $("#fadetogger").click(function() {
                $("#div1").fadeToggle(1000);
                $("#div2").fadeToggle(1000);
                $("#div3").fadeToggle(1000);
            });
            //参数为动画时间 和 终止透明度
            $("#fadeto").click(function() {
                $("#div1").fadeTo(1000,0.5);
                $("#div2").fadeTo(1000,0.7);
                $("#div3").fadeTo(1000,0.3);
            });
        </script>
    </body>
</html>

slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法智慧改变元素的高度。如果一个元素的display属性值为none.当调用slideDown()方法时。这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。

示例代码：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 50px;
                background-color: aqua;
                display: none;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <div></div>
        <button id="slideDown">由上至下延伸显示</button>
        <button id="slideUp">由下至上缩短隐藏</button>
        <button id="slidetogger">显示/隐藏</button>
        <script>
            $("#slideDown").click(function() {
                $("div").slideDown(1000);
            });
            $("#slideUp").click(function() {
                $("div").slideUp(1000);
            });
            $("#slidetogger").click(function() {
                $("div").slideToggle(1000);
            })
        </script>
    </body>
</html>

自定义动画animate()

前面虽然讲了一些JQuery库封装好的动画效果，但是很多情况下无法满足用户的需求，那么就需要对动画有更多的控制。需要采取一些高级的自定义动画来解决这些问题。在JQuery中我们可以使用animate()方法来自定义动画。

语法：

animate(params,[speed],[easing],[fn]);

这个函数的关键在于指定动画形式及结果样式的属性对象。这个对象中的每一个属性都表示一个可以变化的样式属性(如 "height"，"top"或者"opacity")。注意：所制定的属性必须使用驼峰形式：比如用marginLeft替代margin-left。

参数：

params：一组包含作为动画属性和终值的样式属性及其值的集合

speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值。

easing: 要使用的擦出效果的名称(需要插件支持)默认JQuery提供的"linear"和"swing";

fn: 在动画完成时执行的函数，每个元素执行一次。

示例：

一个div在页面上横向移动

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                position: relative;
                width: 80px;
                height: 80px;
                background-color: aqua;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <div></div>
        <script>
            $("div").animate({"left":100},1000);
        </script>
    </body>
</html>

累加,累减动画

在之前的代码中设置了{"left":100}作为动画参数，如果在100px之前加上"+=" 或者"-="符号即表示在当前位置累加或者累减。

示例：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                position: relative;
                width: 80px;
                height: 80px;
                background-color: aqua;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
        <button id="animate">累加累减</button>
    </head>
    <body>
        <div></div>
        <script>
//            $("div").animate({"left":100},1000);
            $("#animate").click(function() {
                $("div").animate({"left":"+=200"},1000);
            });
        </script>
    </body>
</html>

每次动画都在之前的位置上累加向左200；

多重动画

(1)同时执行多个动画

还是上面的例子。只是改一下动画方式

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                position: relative;
                width: 80px;
                height: 80px;
                background-color: aqua;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
        <button id="animate">累加累减</button>
        <button id="animates">同时执行多个动画</button>
    </head>
    <body>
        <div></div>
        <script>
//            $("div").animate({"left":100},1000);
//            $("#animate").click(function() {
//                $("div").animate({"left":"+=200"},1000);
//            });
            $("#animates").click( myanimation = function() {
                $("div").animate({"left":200,"height":200},2000);
            });
            //移除事件
//            $("#animates").unbind("click",myanimation);
        </script>
    </body>
</html>

(2)按顺序执行动画

$("#oneByone").click(function() {
    $("div").animate({"left":100},1000).animate({"opacity":0.3},1000);
});

(3)综合动画

$("div").click(function() {
        $(this).animate({"left":100,"height":150,"opacity":1},3000).animate({
              "top":200,"width":150
          },3000).fadeOut("slow",function(){
               $(this).remove();
        });
});

动画回调函数

如果我们需要在动画完成之后，改变元素的样式，不能直接使用css()方法，因为直接使用css()方法，会在动画的一开始就执行。这就是css()方法不会加入到东湖的队列中，那么要实现我们提出的需求，只能使用，callback动画的回调函数了。代码如下

            $("div").click(function() {
                $(this).animate({"left":100,"height":150,"opacity":1},3000).animate({
                    "top":200,"width":150
                },3000,function() {
                    $(this).css("border","1px solid red");
                })
            });

停止动画和判断是否处于动画状态

很多时候要停止匹配元素正在进行的动画，例如上例中的动画，如果需要在某处停止动画需要使用stop()方法，stop()语法的结构为

stop([clearQueue][,gotoEnd]);

参数clearQueue和gotoEnd都是可选的参数。为Boolean值，clearQueue表示是否要清除正在进行的动画队列。gotoEnd代表是否直接将正在进行的动画状态直接跳转到结束状态。

如果使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续执行，则以当前的状态开始接下来的动画。经常会遇到这种情况，在为一个元素绑定hover事件之后，用户在光标移入元素时，会触发动画效果，而当这个动画还没有结束时，用户就将光标移出这个元素了，那么光标移出的动画就会被放进队列中，等待光标移入的动画执行完才能执行。因此光标移入的过快就会导致动画效果与光标的动作不一致。此时，只要在光标移入，移出动画之前加入stop()方法，就能解决这个问题。stop()方法会结束当前的动画直接执行队列中的下一个动画代码如下

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
                position: relative;
                width: 80px;
                height: 80px;
                background-color: aqua;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <div></div>
        <script>
            $("div").hover(function() {
                $(this).stop().animate({"height":150,"width":150},2000);
            },function() {
                $(this).stop().animate({"height":22,"width":60},2000);
            });
        </script>
    </body>
</html>

如果遇到组合动画例如：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
                position: relative;
                width: 80px;
                height: 80px;
                background-color: aqua;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <div></div>
        <script>
            $("div").hover(function() {
　　　　　　　　　　//此时移出光标 会执行变宽动画 然后再执行移出动画
                $(this).stop().animate({"height":150},2000)
　　　　　　　　　　.animate({
                    "width":150
                },2000);
            },function() {
                $(this).stop().animate({"height":22},2000).animate({
                    "width":60
                },2000);
            });
        </script>
    </body>
</html>

此时只有一个不带参数的stop()方法就力不从心了，因为stop()方法只会停止正在进行的动画，如果动画停止在第一阶段(改变height的阶段),则触发光标移出事件后，只会停止当前的动画，并继续纸箱下面的变宽动画，光标移出动画要在变宽动画之后，这显然不符合预期的。这种情况下stop()方法的第一个参数就起作用了。

可以把第一个clearQueue参数设置为true，此时程序会把当前的元素接下来尚未执行的动画队列全部清空。代码如下

        <script>
            $("div").hover(function() {
                $(this).stop(true).animate({"height":150},2000).animate({
                    "width":150
                },2000);
            },function() {
                $(this).stop(true).animate({"height":22},2000).animate({
                    "width":60
                },2000);
            });
        </script>

第二个参数(gotoEnd)可以用于让正在执行的动画直接到达结束的状态，通常用于后一个动画需要基于前一个动画的末状态的情况。可以通过stop(false,true)这种方式来让当前的动画直接到达最终状态。

注意jQuery只能设置正在执行的动画达到最终状态，而没有提供直接达到未执行动画直接到达最终状态的方法。

判读元素是否处在动画状态

在使用animate方法的时候，为避免动画积累而导致的动画与用户的行为不一致，当用户快速在某个元素上执行animate()时，就会出现动画积累，解决的方法就是判断元素是否处在动画状态。如果不处于动画状态，才为元素添加新的动画，否则不添加。

if($("element").is(":animated")){
      //如果当前没有动画状态 添加动画
}

动画方法概括

动画队列

(1)一组元素上的动画效果

当一个animate()方法中应用多个属性时，动画是同时发生的。

当以链式的方式写动画时，动画是按顺序发生的。

(2)多组元素上的动画效果

默认情况下，动画是都是同时发生的

当以回调的形式应用动画方式时，动画是按照回调顺序发生的。