标签：
自定义动画
jQuery提供了几种简单常用的固定动画方法我们使用，但有些时候，这些简单动画无法满足我们更加复杂的需求，这个时候，jQuery提供了一个.animate()方法来创建我们的自定义动画，满足更多复杂多变的要求。
html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画效果</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <input type="button" class="button" value="按钮" /> <div id="box"> box </div> </body> </html>
style.css代码：
#box { width: 100px; height: 100px; background: red; position: absolute; }
jQuery代码：
$(".button").click(function() {
$("#box").animate({
width:"300px",
height:‘200px‘,
opacity:0.5,
fontSize:"50px"
});
});
注意：一个CSS变化就是一个动画效果，上面的例子中，已经有四个CSS变化，已经实现了多重动画同步运动的效果。
必传的参数只有一个，就是一个键值对CSS变化样式的对象。还有两个可选参数分别为速度和回调函数。
$(".button").click(function() {
$("#box").animate({
width:"300px",
height:‘200px‘,
opacity:0.5,
fontSize:"50px"
}, 2000, function() {
alert("动画执行完毕哟！");
});
});
到目前位置，我们都是创建的固定位置不动的动画，如果想要实现运动状态的位移动画，那就必须使用自定义动画，并且结合CSS的绝对定位功能。
$(".button").click(function() {
$("#box").animate({
left:"300px", //先必须设置CSS绝对定位
top:"200px"
},"slow");
});
自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位置或状态下再进行动画，jQuery提供了自定义动画的累加、累减功能。
$(".button").click(function() {
$("#box").animate({
left:"+=100px"
},"slow");
});
自定义实现列队动画的方式，有两种：
回调函数+列队动画(一定要细心，很容易写错)：
$(".button").click(function() {
$("#box").animate({
width:"300px"
}, function() {
$("#box").animate({
height:"200px"
}, function() {
$("#box").animate({
opacity:0.5
}, function() {
$("#box").animate({
fontSize:"50px"
});
});
});
});
});
在同一个元素的基础上，使用连缀调用，可以实现队列动画：
$(".button").click(function() {
$("#box").animate({width:"300px"})
.animate({height:‘200px‘})
.animate({opacity:0.5})
.animate({fontSize:"50px"});
});
在同一个元素的基础上，使用顺序排列调用，可以实现队列动画：
$(".button").click(function() {
$("#box").animate({width:"300px"});
$("#box").animate({height:‘200px‘});
$("#box").animate({opacity:0.5});
$("#box").animate({fontSize:"50px"});
});
注意：如果不是同一个元素，就会实现同步动画。
标签：
原文地址：http://www.cnblogs.com/yerenyuan/p/5430438.html
