自定义动画 - jQuery | 绿叶学习网

在之前的章节中，我们接触了3种动画类型：显示与隐藏、淡入与淡出、滑上和滑下。实际上，我们经常还可以看到其他动画形式，例如一个元素不断移动、一个元素不断扩大等。像这些动画，单纯使用之前那3种动画类型就无法实现了。

为了满足实际开发中各种动画设计的需求，jQuery为我们提供了一种“自定义动画”的解决方案。对于自定义动画，我们分为以下3个方面来介绍。

（1）简单动画
（2）累积动画
（3）回调函数

一、简单动画

在jQuery中，对于自定义动画，我们都是使用animate()方法来实现的。

语法：

$().animate(params, speed, fn)

说明：

params是一个必选参数，表示属性值列表，也就是元素在动画中变化的属性列表。

speed是一个可选参数，表示动画的速度，单位为毫秒，默认为400毫秒。如果省略，则表示采用默认速度。

fn也是一个可选参数，表示动画执行完成后的回调函数。

举例：


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:50px;
            height:50px;
            background-color:lightskyblue;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("div").click(function () {
                $(this).animate({ "width": "150px", "height": "150px" }, 1000);
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，预览效果如下图所示。

当我们点击div元素后，此时预览效果如下图所示。

分析：

从上面例子可以看出，animate()方法的参数params采用的是“键值对”形式，语法如下：

{"属性1": "取值1", "属性2":"取值2", ... , "属性n": "取值n"}

在上面例子的基础上，如果还想同时使得背景颜色变为红色，我们很自然地写下了如下代码：

$("div").click(function () {
    $(this).animate({ "width": "150px", "height": "150px" , "background-color": "red" }, 1000);
})

当我们测试时，居然背景颜色没有改变？！再检查一遍代码，也没发现有什么错误啊！这究竟是怎么回事呢？其实你没错，是jQuery错了！什么？jQuery自己都有错？站长你逗我？

实际上，jQuery本身有一个缺陷，就是使用animate()方法时会无法识别background-color、border-color等颜色属性。因此，我们还需要引入第三方插件jquery.color.js来修复这个bug。对于jquery.color.js，本书配套源代码里面有，小伙伴们可以去下载。

举例：引入jquery.color.js


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:50px;
            height:50px;
            background-color:lightskyblue;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.color.js"></script>
    <script>
        $(function () {
            $("div").click(function () {
                $(this).animate({ "width": "150px", "height": "150px" , "background-color": "red" }, 1000);
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，预览效果如下图所示。

当我们点击div元素后，此时预览效果如下图所示。

分析：

这里大家要注意一点，由于jquery.color.js是依赖jQuery库存在的，因此jquery.color.js文件必须在jquery库文件后面引入，不然就无法生效。实际上，你可以把jquery.color.js看成是一个jQuery插件，这样更好理解。

二、累积动画

在jQuery中，对于元素的宽度和高度，我们可以结合+=和-=这两个运算符来实现累积动画。

举个例子，{“width”: “+=100px”}表示以元素本身的width为基点加上100px，而{“width”: “-=100px”}表示以元素本身的width为基点减去100px。

举例：


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:50px;
            height:50px;
            background-color:lightskyblue;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //简单动画
            $("#btn1").click(function () {
                $("#box1").animate({ "width": "100px", "height": "100px" }, 1000);
            })
            //累积动画
            $("#btn2").click(function () {
                $("#box2").animate({ "width": "+=100px", "height": "+=100px" }, 1000);
            })
        })
    </script>
</head>
<body>
    <div id="box1"></div>
    <input id="btn1" type="button" value="简单动画" /><br />
    <div id="box2"></div>
    <input id="btn2" type="button" value="累加动画" />
</body>
</html>

默认情况下，预览效果如下图所示。

当我们点击两个按钮后，此时预览效果如下图所示。

分析：

使用的是简单动画形式，因此元素最终的width为100px，height为100px。

animate({ "width": "+=100px", "height": "+=100px" }, 1000)使用的是累积动画形式，因此元素最终的width为150px，height为150px。

从这个例子我们可以看出，简单动画形式只是给定了元素属性的最终值，而累积动画形式是在元素原来值的基础上增加或减少。

此外在这个例子中，当我们多次点击【累积动画】按钮后，会发现这个动画效果会不断累加，小伙伴们可以自行测试一下。

三、回调函数

在介绍回调函数之前，我们先来看一个这样一个效果：元素的动画执行完成后，再用css()方法为元素添加一条边框。

举例：


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:50px;
            height:50px;
            background-color:lightskyblue;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("div").click(function () {
                $(this).animate({ "width": "150px", "height": "150px" }, 1000).css("border", "1px solid red");
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，预览效果如下图所示。

当我们点击div元素后，此时预览效果如下图所示。

分析：

我们可以发现，当点击的一瞬间，元素就已经被添加了边框。也就是说，animate()方法才刚刚执行，css()也一起被执行了。这个跟我们预期的效果完全不一样啊！因为我们想要的效果是animate()方法执行完成后，才去执行css()方法。

出现这种情况的根本原因在于css()方法并不会加入到“动画队列”中，而是立即被执行了。在jQuery中，如果想要在动画执行完成后再实现某些操作，我们就需要用到animate()方法中的回调函数。

举例：回调函数


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:50px;
            height:50px;
            background-color:lightskyblue;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("div").click(function () {
                $(this).animate({ "width": "150px", "height": "150px" }, 1000, function(){
                    $(this).css("border", "2px solid red");
                });
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，预览效果如下图所示。

当我们点击div元素后，此时预览效果如下图所示。

分析：

使用回调函数，可以使得在动画执行完成之后，再执行某些操作。并不是只有animate()方法才有回调函数，实际上所有jQuery动画的方法都有，之前小伙伴们也接触过不少了。不过回调函数在jQuery动画中用得不多，大家了解一下即可。