jQuery中animate()动画方法

自定义动画方法animate()
animate(params,[speed],[easing],[fn])
参数说明：
（1）params： 一个包含样式属性及值的映射，比如{property1: “value1”, property2: “value2”, ····· }
要特别注意所有用于动画的属性必须是数字的，除非另有说明；
这些属性如果不是数字的将不能使用基本的jquery功能。比如常见的，borderwidth、margin、padding、 width、height、fontsize、left、top、right、bottom等等这些都是能产生动画效果的。
background-color很明显不可以，因为参数是red或者gbg这样的值，除非用插件，否则正常情况下是没有动画效果的。
(2）speed : 速度参数，可选。三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
(3)easing: 要使用的擦除效果的名称(需要插件支持). 默认jQuery提供"linear"和 “swing”.
（4）callback:在动画完成时执行的函数，可选。
单位，属性值的单位默认为像素（px）,除非另有说明。单位em 和 %需要指定使用
简单动画
点击class名为box的元素，该元素向右移动；

$(".box").click(function(){        
	$(this).animate({left:"300"},3000);    
});

累加、累减动画
在之前的基础上加上"+=“或”-="，即表示在当前位置累加或者累减

 $(".box").click(function(){        
 	$(this).animate({left:"+=500"},3000);    
 });

多重动画
（1）同时执行多个动画
一边向右滑动一边增加高度

$(".box").click(function(){        
	$(this).animate({left:"500",height:"200"},3000);    
});

（2）按顺序执行多个动画 先向右滑动，然后再增加它的高度。 像这样，动画效果的执行具有先后顺序，称为"动画队列" 先进先出

 $(".box").click(function(){        
 $(this).animate({left:"500"},3000)            
 	.animate({height:"200"})    
 });

动画回调函数
动画执行完最后一步添加背景颜色 用回调函数对非动画方法实现排队

$(".box").click(function(){        
$(this).animate({left:"400px",heigth:"200px",opacity:"1"},3000)     
     .animate({top:"200px"},3000,function(){                    
     		 $(this).css("backgroundColor","plum");            	})    
         });

停止动画
.stop() 停止正在运动的animate 执行下一个
参数 ： true 停止所有的animate
参数 ： true,true 停止所有的animate 并且瞬间移动到目标点
.finish() 结束动画，且直接到达最后的目标 参数：true false
.delay() 延时 想要一个动画执行完成停顿下在执行下一个动画可以用这个方法

$(".box").click(function(){        
	$(this).animate({left:"400px",heigth:"200px"})
		.delay(1000)                                
		.animate({top:"200px"})    
});

动画队列
(1) 一组元素上的动画效果

• 当在一个 animate(方法中应用多个属性时，动画是同时发生的。
• 当以链式的写法应用动画 方法时，动画是按照顺序发生的。
  (2)多组元素上的动画效果
• 默认情况下， 动画都是同时发生的。
• 当以回调的形式应用动画方式时，动画是按照回调顺序发生的。
  另外，在动画方法中，要注意其他非动画方法会插队，例如css()方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中。