此货用来制作自定义动画的。
先看下面的动画演示：
 

本演示视频html代码部分如下

<button>有本事你点我试试。</button>
<div class="content">Boooom!</div>

 
css代码部分如下：

* {
    margin: 0;
    padding: 0;
}

button {
    padding: 10px;
    background-color: #000000;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    cursor: pointer;
    display: block;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    border: 0;
    outline: 0;
}

.content {
    width: 100%;
    text-align: center;
    font-size: 40px;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times,
        "Times New Roman", serif;
    font-weight: bold;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: red;
    font-size: 0;
    opacity: 0;
}

 
js代码部分如下：

$(function() {
    "use strict";
    var b = $("button"),
        a = $("body"),
        c = $(".content");
    b.click(function() {
        $(this).animate(
            {
                "font-size": "0",
                opacity: "0"
            },
            800,
            function() {
                c.animate(
                    {
                        "font-size": "60px",
                        opacity: "1"
                    },
                    200
                );
            }
        );
    });
});

 
先不用纠结于上面的代码。
我们先看下，animate的语法：

$(selector).animate({params},speed,callback);

{params}里可以定义多组css声明。如上面的例子。
speed就是动画执行时间。
callback就是回调函数。咱用过很多次了。
 
以上几个项目中，params必须要有的。速度不写的话就是默认速度。如果没有回调函数，也不用设置。
以上就是animate的基本用法。
 
如果想要了解更多animate的用法，可以从w3c的网上自学研究。