自定义动画

jQuery动画原理跟CSS3动画原理是一样的，都是将元素的某一个属性从“一个属性值”在指定时间内平滑地过渡到“另外一个属性值”来实现动画效果。

animate() 方法

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

必选参数params表示“属性:值”列表，也就是元素在动画中变化的属性列表，以键值对的形式存在。

{"属性1":"属性值1","属性2":"属性值2",……, "属性n":"属性值n"}

需要注意：
1.在调用animate()方法的时候无法识别color、background-color和border-color这些颜色属性。因此我们还需要引入一个jquery.color.js插件。
2.默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

<head>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
    $(function () {
        $("#adiv").click(function () {
            $(this).animate({
                 "left":"250px", 
                 "width": "100px", 
                 "height": "100px" ,
                 "background-color":"red",
                 "opacity":"0.5",}, 1000)
        })
    })
</script>
</head>
<body>
    <div id="adiv" style="background:#98bf21;height:10px;width:10px;position:absolute;">
</div>

使用其他属性值
相对值
可以定义变化的属性值为相对值（相对原本值），在值的前面加上 += 或 -=，例如上面animate变化的值

"width": "+=100px", 
"height": "+=100px"

则每次触发时，都会产生变化。

"show"、"hide" 或 "toggle"

"height":"toggle"

从高度改变元素状态show/hide。

回调函数

在动画执行完成之后再实现某些函数操作，说白了，就是在某个方法执行完成之后的“附加操作”。。

$(function () {
    $("#adiv").click(function () {
        $(this).animate({
             "left":"250px", 
             "width": "100px", 
             "height": "100px" ,
             "background-color":"red",
             "opacity":"0.5",},
        1000,
        function(){$(this).css("border", "5px solid red");})
        })
    })

这样，就会在执行完动画后，再编辑css样式。

队列动画

上面的动画效果都是同时完成的，如果希望动画效果分开前后执行，就需要使用队列动画。

$().animate().animte()…….animte()

或者写作

var 变量=$()
变量.animate()
变量.animate().......

jQuery入门教程:13.动画效果（2）

自定义动画

animate() 方法

回调函数

队列动画