adeIn(speed,[callback])
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
返回值
jQuery
参数
speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function) : (Optional) (可选) 在动画完成时执行的函数
示例
用600毫秒缓慢的将段落淡入
jQuery 代码:
$("p").fadeIn("slow")
用200毫秒快速将段落淡入，之后弹出一个对话框
jQuery 代码:
$("p").fadeIn("fast",function(){
alert("Animation Done.")
})
下面是淡出效果
fadeOut(speed,[callback])
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
返回值
jQuery
参数
speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function) :(可选) 在动画完成时执行的函数
示例
用600毫秒缓慢的将段落淡出
jQuery 代码:
$("p").fadeOut("slow")
用200毫秒快速将段落淡出，之后弹出一个对话框
jQuery 代码:
$("p").fadeOut("fast",function(){
alert("Animation Done.")
})
1.toggle():
toggle()方法除了模拟鼠标连续单击事件之外，同时会动态的隐藏改变当前元素的高度，宽度和不透明度，最终切换当前元素的可见状态。如果元素可见，则切换隐藏状态，如元素隐藏，切换可见状态
2.fadeln()与fadeOut()
这两个方法，实现了淡入和淡出的一个动画效果，fadeln（）渐显效果，fadeout（）渐隐效果，两者结合使用，可把元素隐藏在按钮中，在通过点击事件显示，两方法只改变元素的透明度，不修改其他属性
3.fadeToggle()
此方法会动态的改变当前元素的透明度，最终却换当前元素的可见状态。如果元素是可见的，则通过淡出效果切换隐藏；如果元素是隐藏的，则通过淡入效果切换可见状态，不设置参数时，默认0.4秒内发生淡入与淡出的动画效果
4.fadeTo()
fadeln()与fadeOut()方法都是渐隐渐显，透明度从1到0，从0到1实现一个渐隐渐显效果，而fadeToggle()方法则是可以控制1-0的透明度，为更好展示透明度的效果，可在页面中创造一个下拉框，用于保存透明度值，操作下拉框去控制图片透明度值
5.slideDown()与 slideUp()
slideDown()可改变元素高度，呈现一个滑动效果，由上往下滑动，直到显示最终的当前元素，slideUp（）相反，由下往上滑动，直到隐藏最终的当前元素
6.slideToggle()
slideToggle()方法跟slideDown()与 slideUp() 两个方法有异曲同工之妙，同样可改变元素的高度，不同于slideDown()与 slideUp() 的效果， 这个方法是通过点击事情控制元素的隐藏和显示
7.animate()
这个方法是自定义动画效果的方法，高度，宽度，透明度，运行速度都是可通过自定义给属性，这个方法只能改变可以取数字值的css属性，如：大小，边框，内外边距，定位，字体，文本，背景，透明度。
8.stop()
停止动画，stop（）方法能结束当前的动画，并立即进入到下一个动画。
使用Jquery类库，步骤：
1、准备好html：
<div class="container"><div class="item-list">
<div class="item active"><img src="0.jpg" alt="第1张图"></div>
<div class="item"><img src="1.jpg" alt="第2张图"></div>
<div class="item"><img src="2.jpg" alt="第3张图"></div>
</div>
<div class="item-control">
<a href='javascript:' class="active">●</a>
<a href='javascript:'>●</a>
<a href='javascript:'>●</a>
</div>
</div>
2、为html设置样式
<style>.container{
width: 500px
height: 300px
text-align: center
background: red
position:relative
}
.container>.item-control{
display: inline-block
width: 100%
left: 0
position: absolute
bottom: 10px
background: rgba(0,0,0,0.2)
}
.container>.item-control>a{
font-size: 20px
color: rgba(255,255,255,0.7)
text-decoration: none
}
.container>.item-control>a.active{
color: #fff
}
.container>.item-list,
.container>.item-list>.item{
width: 100%
height: 100%
}
.container>.item-list>.item{
display: none
}
.container>.item-list>.item.active{
display: block
}
</style>
3、编写Js
<script>(function(){
$(document).on('click','.container .item-control a',function(){
var _index = $(this).index()
$(this).addClass('active').siblings().removeClass('active')
$('.container .item-list .item').eq( _index ).addClass('active').siblings().removeClass('active')
})
})()
</script>
最终效果见图：
