jQuery处理动画

参考

jQuery支持属性动画，就是可以对某一个CSS属性进行动画变换，比如对width、height等的变换，实现缩放等效果；对background-color等颜色的变换等等，几乎所有的CSS属性都能进行变换，它变换的基础是上一次静止状态的属性值。

语法：

$(selector).animate(Object toCSS [,Integer duration] [, String rate] [, Function callback]);

toCSS是想要变换到的那个状态对应的CSS，注意这是一个对象，很多CSS属性里面包含-字符，但是javascript标识符里面不含有这个字符，所以，凡是遇到带有-字符的CSS属性，都要把-去掉，并把紧挨着它后面的字母大写，比如background-color要写成backgroundColor

duration是动画执行时长。它可以是具体的数值，单位是毫秒，也可以取slow、fast等预定义好的字符串值。

rate是速度变化率，就是我们通常说的加速度。

callback是动画执行完成后的回掉函数。

这个功能与CSS3提供的transition是一样的。

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            display: inline-block;
            background-color: red;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $('div').animate({
            width: 400,
            height: 400,
            opacity: '0.5'
        });
    </script>
</body>
</html>

默认情况下，所有HTML元素的位置都是静态的，并且无法移动。如需对位置进行操作，需要首先把元素的CSS的position属性设置为relative、fixed、absolute其中之一。

对于尺寸等可以进行简单的加减运算的，可以直接使用+=、-=两个符号，表示在原来的基础上增加或者减少多少。示例：

$('div').animate({
    width: '+=200',
    height: '+=200',
    opacity: '0.5'
});

可以连续对一个元素使用动画，jQuery会把这些动画放入队列，一个一个的执行，而不是同时执行。示例：

var div=$("div");
div.animate({height:'300px', opacity:'0.4'}, "slow");
div.animate({width:'300px', opacity:'0.8'}, "slow");
div.animate({height:'100px', opacity:'0.4'}, "slow");
div.animate({width:'100px', opacity:'0.8'}, "slow");