animate：animate内部设置的多个值是同步变化的，链式的 animate是依次动画的。
例子：animate({ left: 0, top: 0, width: 300, height: 300 },3000) .animate({ opacity: 0 }).animate({ opacity: 1 })。还可以指定增量，$(“#div1”).animate({ height: “+=100” });
//如果 是+=、-=等增量形式要写成字符串，因为JavaScript不认识这种语法
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <title></title> 5 <script src="jquery-1.8.3.js"></script> 6 <script type="text/javascript"> 7 $(function () { 8 $(‘:button‘).click(function () { 9 $(‘img‘).animate({ ‘left‘: ‘20px‘, ‘top‘: ‘500px‘, ‘width‘: ‘30px‘, ‘height‘: ‘30px‘ }, 3000).animate({ ‘top‘: ‘20px‘, ‘left‘: ‘600px‘, ‘width‘: ‘100px‘, ‘height‘: ‘100px‘ }, 3000).animate({‘top‘:‘+=400px‘,‘left‘:‘-=500px‘},3000); 10 }); 11 }); 12 13 14 </script> 15 </head> 16 <body> 17 <input type="button" name="name" value="小鸟飞起来" /> 18 <br/> 19 <img style="position:absolute;" src="2.png" /> 20 </body> 21 </html>
17jquery学习笔记-------动画----图片在网页中移动，改变样式
原文：http://www.cnblogs.com/clcloveHuahua/p/5128792.html