问题:效果受局限 解决:万能动画函数: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>