jQuery的animate()方法可以创建自定义动画。
jQuery的动画-在animate()方法
jQuery的animate()方法用于创建自定义动画。
句法：
$(selector).animate({params},speed,callback);所需PARAMS参数定义的CSS属性进行动画。
可选的速度参数指定的效果的持续时间。 它可以采取以下值： "slow", "fast" ，或毫秒。
可选的回调参数是在动画完成后所要执行的功能。
下面的例子演示了一个简单使用的animate()方法; 它移动的<div>元素的右侧，直到它已达到了250像素的左属性：
缺省情况下，所有的HTML元素有一个静态位置，并且不能移动。
要操作的位置，记得先把元素的CSS position属性设置为relative, fixed ，或absolute ！
jQuery的animate() -操纵多个属性
注意，多个属性可以在同一时间进行动画：
例
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
试一试» 是否有可能操纵与所有的CSS属性animate()方法？
是的，差不多！ 但是，要记住一件重要的事情：在使用时，所有属性名必须是骆驼套管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效果参考 。