jQuery处理动画

参考

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

语法:

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

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

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

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元素的位置都是静态的,并且无法移动。如需对位置进行操作, 需要首先把元素的CSSposition属性设置为relativefixedabsolute其中之一。

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

$('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");