jQuery 效果 - 动画片
使用 jQuery，您可以创建自定义动画。
jQuery 动画 - animate() 方法
jQueryanimate()方法用于创建自定义动画。
语法：
$(
selector).animate({
params}
,speed,callback);
必需的 params 参数定义要进行动画处理的 CSS 属性。
可选的速度参数指定效果的持续时间。它可以采用以下值："slow"、"fast" 或毫秒。
可选的回调参数是动画完成后要执行的函数。
下面的例子演示了一个简单的使用animate()方法;它将 <div> 元素向右移动，直到达到 250px 的 left 属性：
默认情况下，所有 HTML 元素都具有静态位置，并且无法移动。
要操纵位置，请记住首先将元素的 CSS 位置属性设置为相对、固定或绝对！
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", or "toggle”：
jQuery animate() - 使用队列功能
默认情况下，jQuery 带有动画队列功能。
这意味着如果你写多个animate()互相调用后，jQuery 使用这些方法调用创建一个 "internal" 队列。然后它一一运行动画调用。
因此，如果您想依次执行不同的动画，我们可以利用队列功能：
示例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 效果参考。
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!