jQuery的动画主要分为两个大方面：内置动画和自定义动画，本文主要学习个讲解这两个方面。
一．内置动画：
1. 显示hide()/隐藏show()/显示或隐藏toggle()
代码如下：
<style>
#box{width: 100px;height: 100px;background: red;}
</style>
<body>
</body>
<script>
$("#btn1").click(function(){
$("#box").hide();
})
$("#btn2").click(function(){
$("#box").show();
})
$("#btn3").click(function(){
$("#box").toggle();
})
</script>
2. 上拉slideUp()/下拉slideDown()/上拉或下拉slideToggle()
代码如下：
<style>
#box{width: 100px;height: 100px;background: red;}
</style>
<body>
<input type="button" id="btn1" value="上拉">
<input type="button" id="btn2" value="下拉">
<input type="button" id="btn3" value="上拉/下拉">
</body>
<script>
$("#btn1").click(function(){
$("#box").slideUp();
})
$("#btn2").click(function(){
$("#box").slideDown();
})
$("#btn3").click(function(){
$("#box").slideToggle();
})
</script>
3. 淡出fadeOut()/淡入fadeIn()/淡出或淡入fadeToggle()
代码如下：
<style>
#box{width: 100px;height: 100px;background: red;}
</style>
<body>
<input type="button" id="btn1" value="淡入">
<input type="button" id="btn2" value="淡出">
<input type="button" id="btn3" value="淡入/淡出">
</body>
<script>
$("#btn1").click(function(){
$("#box").fadeOut();
})
$("#btn2").click(function(){
$("#box").fadeIn();
})
$("#btn3").click(function(){
$("#box").fadeToggle();
})
</script>
以上方法中可以接受两个参数，分别是：
参数1：动画执行的时间或者表示速度的字符串，可省略。
参数2：回调函数，在动画完成之后执行的内容，可省略。如：
$("#btn1").click(function(){
$("#box").hide(200,"linear",function(){
alert("动画结束了")
});
})
4. 半透明fadeTo()
代码如下：
<style>
#box{width: 100px;height: 100px;background: red;}
</style>
<body>
<input type="button" id="btn" value="半透明">
</body>
<script>
$("#btn").click(function(){
$("#box").fadeTo(1000,0.2);
}
</script>
此方法可以将被选元素的不透明度逐渐地改变为指定的值，
可以接受三个参数，分别是：
参数1：动画执行的时间，可省略。
参数2：透明度的数值，介于0-1之间。不可省略。
参数3：回调函数，在动画完成之后执行的内容。
二．自定义动画：
jQuery同时提供了animate()方法，能够使开发者自定义动画。
animate()方法可接受三个参数：
参数1：对象，即为希望进行变化的css属性列表，以及希望变化到的最终值，必选
参数2：:动画运动的时间，可省略
参数3：:回调函数，表示动画结束后要做的事情，可省略
代码如下：
<style>
#box{width: 100px;height: 100px;position: absolute;left: 0;top:30px;background: red;}
</style>
<body>
<input type="button" id="btn" value="动画">
<div id="box"></div>
</body>
<script>
$("#btn").click(function(){
$("#box").animate({
width:0,
height:0,
left:50,
top:80
},2000,function(){
alert("结束了");
});
</script>
需要注意的是：animate()方法中参数1中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.并且只能是css中用数值表示的属性。例如width、top、opacity等
像backgroundColor这样的属性不被animate()方法支持。
以上为jQuery动画的详解，如果有误，敬请纠正。
