jQuery 动画方法 animate 基础用法

JQuery 的 animate 方法通过在一定的时间内持续修改 css 属性值的方法，达到一种动画效果。

函数原型：

(selector).animate({styles},speed,easing,callback)

参数说明：

styles：css 属性值，可以多个。属性名需使用“驼峰”写法，比如 padding-left 当写作 paddingLeft ，margin-top 当写作 marginTop。

speed：动画执行的时间，默认400，可以是数值，也可以是预定值：slow, fast 。

easing：动画执行速度的变化，可以是：swing - 在开头/结尾移动慢，在中间移动快；linear - 匀速移动。

callback：动画执行完后的回调函数。

举例说明：

1. 把元素高度改为300px

$("button").click(function(){
    $("#box").animate({height:"300px"});
});

2. 使用相对值-在原来的高度上增加200px

$("button").click(function(){
    $("#box").animate({height:"+=200px"});
});

3. 同时修改多个css属性值

$("button").click(function(){
    $("#box").animate({height:"300px", width:"300px"});
});

4. 设置动画执行时间为 2 秒。

$("button").click(function(){
    $("#box").animate({height:"300px"}, 2000);
});

5. 设置动画执行效果为 "swing" - 在开头/结尾移动慢，在中间快

$("button").click(function(){
    $("#box").animate({height:"300px"}, 2000, 'swing');
});

6. 设置动画执行后的回调函数

$("button").click(function(){
	$("#box").animate({height:"300px"}, 2000, 'swing', function() {
		console.log('动画执行完了');
	});
});

7. 设置多个动画-组成队列-依次执行

$("button").click(function(){
	$("#box").animate({height:"300px"});
	$("#box").animate({width:"300px"});
});