jQuery Effects - 动画
使用 jQuery，您可以创建自定义动画。
jQuery 动画 - animate() 方法
jQuery 的 animate() 方法用于创建自定义动画。
语法
$(selector).animate({params},speed,callback);
必需的 params 参数定义了要进行动画处理的 CSS 属性。
可选的 speed 参数指定了效果的持续时间。它可以接受以下值：“slow”（慢）、“fast”（快）或毫秒。
可选的 callback 参数是一个在动画完成时执行的函数。
以下示例演示了 animate() 方法的简单用法；它将一个 <div> 元素向右移动，直到其 left 属性达到 250px。
默认情况下，所有 HTML 元素的位置属性都是 static，无法移动。
要操作位置，请记住先将元素的 CSS position 属性设置为 relative、fixed 或 absolute！
jQuery animate() - 操作多个属性
请注意，可以同时为多个属性添加动画。
示例
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
自己动手试一试 »
是否可以使用 animate() 方法操作所有 CSS 属性？
是的，几乎可以！但是，有一件重要的事情要记住：所有属性名在使用 animate() 方法时都必须是驼峰式命名：您需要写 paddingLeft 而不是 padding-left， marginRight 而不是 margin-right，依此类推。
此外，颜色动画不包含在核心 jQuery 库中。
如果您想为颜色添加动画，需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。这是通过在值前面加上 += 或 -= 来实现的。
示例
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
自己动手试一试 »
jQuery animate() - 使用预定义值
您甚至可以将属性的动画值指定为“show”（显示）、“hide”（隐藏）或“toggle”（切换）。
jQuery animate() - 使用队列功能
默认情况下，jQuery 为动画提供了队列功能。
这意味着，如果您连续编写多个 animate() 调用，jQuery 会创建一个“内部”队列来存储这些方法调用。然后它将按顺序一一执行这些 animate 调用。
因此，如果您想依次执行不同的动画，可以利用队列功能。
示例 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
自己动手试一试 »
下面的示例首先将 <div> 元素向右移动，然后增加文本的字体大小。
示例 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
自己动手试一试 »
jQuery 练习
jQuery Effects 参考
有关所有 jQuery 效果的完整概述，请访问我们的 jQuery Effect Reference。
