jQuery 动画 _animate() 方法
一、jQuery animate() 方法用于创建自定义动画。
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("div").animate({ top:'500px'/*css样式里加上display:block和首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。*/ }); }); </script> </head> <body> <div style="height:100px; width:200px; border:2px solid #0F0; position:relative; background:red; display:block"></div> </body>
默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
二、jQuery animate() - 操作多个属性
生成动画的过程中可同时使用多个属性：
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px', fontSize:'30px' }); }); </script> </head> <body> <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div> </body>
几乎所有的css属性都可以设置不过，需要记住的是当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
三、jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'+=100px',/*可以使用这种方法给其设置值*/ width:'+=150px', fontSize:'+=30px' }); }); </script> </head> <body> <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div> </body>
四、jQuery animate() - 使用预定义的值
可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("div").animate({ height:'toggle' }); }); </script> </head> <body> <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div> </body>
五、jQuery animate() - 使用队列功能
如果在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ var div=$("div"); div.animate({left:'400px',opacity:'0.5',height:'+=500px',width:'+=550px',fontSize:'+=100px'},'show'); div.animate({left:'100px',opacity:'0.5',height:'100px',width:'150px',fontSize:'20px'},'show'); div.animate({left:'400px',opacity:'0.5',height:'+=700px',width:'+=750px',fontSize:'+=120px'},'show'); div.animate({left:'100px',opacity:'0.5',height:'100px',width:'150px',fontSize:'20px'},'show'); }); </script> </head> <body> <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div> </body>
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ var div=$("div"); div.animate({left:'400px',opacity:'0.5',height:'+=100px',width:'+=150px'},'show'); div.animate({fontSize:'3em'},'show'); }); </script> </head> <body> <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div> </body>