JQ animation 用法

1.参数形式，{}，单个多个都是{}
2.绝对值，相对值,百分比
3.单位 有px 无 px
4.动画时间，动画函数
5.属性值toggle

1.参数形式 {}
有时间的话就是{},time-duration
单位:“200px” <==> 数字 200

	$(".box").animate({
			"width": 400
		}, 1000).animate({
			"height": 400
		}, 1000).animate({
			left: "100px",top:100//单位两种都可以
		}, 1000);
		//animate可以写链式操作,而且是同步的

2.相对值写法必须是字符串
$(".box").animate({“width”: “+=400px”},1000);
$(".box").animate({“width”: “+=200”},1000);

3.延时有两种写法
链式写在animate后面,写在回调函数里面
4.animate不支持transform
可以写在回调函数里面

	$(".box").animate({
			"width": "+=200"
		},1000).delay(1000).animate({
			"height":"+=200px"
		},1000,function(){
			$(this).delay(1000);
	$(this).css({'transition':'2s',width:'300px','height':'300px','transform':'rotate(180deg)'});
		});

5.时间函数

$("ul li").hover(function() {
			var $index = $(this).index();
			var $width = $(this).width();
			var $pos = $index * $width;
			$("span").stop(true, true).animate({
				"left": $pos
			}, {
				duration: 2000,
				easing: "easeOutExpo"
			});
		});

$(this).animate({height:“toggle”});