问题:效果受局限 解决:万能动画函数:animate() animation()可对数值类型的CSS样式执行定时器动画 包括:宽高，位置，透明度，边框宽度，字体大小 强调:不能对非数值类型属性做动画 包括:(颜色，背景图片，字体，display) 如何使用: $(...).animate(params,speed-速度,easing-效果,fn) 其中：params:{css属性1:值1，css属性2:值2，....} speed：{动画持续时间/速度} easing：{速度的变化效果} fn：动画结束后，自动调用的回调函数 动画中的排队和并发 排队:多个动画顺序，先后执行 并发:多个动画同时执行 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #d1{border:1px solid #aaa; border-radius: 6px; background:#eee; word-break: break-all; 200px; height: 200px; position:absolute; } </style> </head> <body> <h1>jQuery动画函数---透明函数</h1> <button id="btn1">开始动画</button> <br/><br/><br/><br/> <div id="d1"> jksahdkjhjashdjaskdhjksahdkjh </div> <script src="javascript/jquery-1.11.3.js"></script> <script> $("#btn1").click(function(){ $("#d1").animate({left:"300px"},2000) .animate({top:"300px"},2000) }) </script> </body> </html>