jQuery 效果 - 动画
使用 jQuery，您可以创建自定义动画。
jQuery 动画 - animate() 方法
jQuery 的 animate() 方法用于创建自定义动画。
语法
$(选择器).animate({参数},速度,回调函数);
必需的 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 下载 颜色动画插件。
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。这可以通过在值前面加上 += 或 -= 来实现。
示例
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
试一试 »
jQuery animate() - 使用预定义值
您甚至可以将属性的动画值指定为 "show"、"hide" 或 "toggle"
jQuery animate() - 使用队列功能
默认情况下，jQuery 带有动画的队列功能。
这意味着，如果您在彼此之后编写多个 animate() 调用，jQuery 会使用这些方法调用创建一个“内部”队列。然后它会依次运行动画调用。
因此，如果您想依次执行不同的动画，我们会利用队列功能。
示例 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 效果参考
要全面了解所有 jQuery 效果，请访问我们的 jQuery 效果参考。
