先来看个示例，点击下方按钮。

快来点击老夫

jQuery动画 - animate()方法

通过jQuery的animate()方法可用来创建一些简单动画。

animate()语法：

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

其中{params}属于必选参数，speed和callback都是非必选参数。{params}用来定义相关CSS属性以动画；speed参数指动画速度，可以取值“slow”、“fast”、具体的毫秒数；callback参数指代回调函数，即当animate方法执行完毕后再进行回调运行的函数。

如下所示，div元素会向右移动，知道其left属性等于250px才结束。

$("button").click(function(){
    $("div").animate({left: '250px'});
}); 

运行一下

---

默认情况下所有的HTML元素的position属性都取值static，因此不能被移动；所以如果要用animate方法，就要先把指定元素的position属性设置成relative、fixed或absolute！

---

animate() - 同时操作多个属性

如下所示，一次性设置多个属性，让动画更为丰富。

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
}); 

运行一下

---

通过上述的方式，animate()可以操作元素的绝大部分属性（比如就不支持色彩相关属性）。但是，animate()设置的属性名中不能出现横杠-，比如：要用paddingLeft来代替padding-left才行，要用marginTop来代替margin-top才行。

---

animate() - 使用相对值

可以使用 += 或 -= 这类符号放在相对值前，则元素的指定属性值则是当前取值加上或减去相对值。

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
});

运行一下

animate() - 使用hide/show/toggle

可以设置元素的width属性或者height属性为hide、show或toggle，分别意味动画行为为：隐藏、显现、切换隐藏显示状态。

$("button").click(function(){
    $("div").animate({
        width: 'toggle'
    });
}); 

运行一下

animate() - 把动画连起来

批量使用animate()方法，jQuery会自动把这些动作都连贯起来。

$("button").click(function(){
    var div = $("div");
    div.animate({height: '320px', opacity: '0.4'}, "slow");
    div.animate({width: '280px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 

运行一下