一.基础效果
.hide([duration][,easing][,complete])
用于隐藏元素，没有参数的时候相当于直接设置display属性
$('.box').hide()
//相当于
$('.box').css('display','none')
.show([duration][,easing][,complete])
用于显示元素，用法与hide相似
$('.show').on('click',function(){
$('.box').show()
})
.toggle([duration][,easing][,complete])
用来切换显示和隐藏元素
$('.toggle').on('click',function(){
$('.box').toggle(300);
});
二.渐变效果
.fadeIn([duration][,easing][,complete])
通过淡入的方式显示元素
$('.fadeIn').on('click',function(){
$('.box').fadeIn('slow')
})
.fadeOut([duration][,easing][,complete])
通过淡出的方式隐藏匹配元素
$('.fadeOut').on('click',function(){
$('.box').fadeOut('slow');
});
.fadeTo(duration,opacity[,easing][,complete])
调整匹配元素的透明度，该方法通过调整元素的不透明度去做效果
$('.fadeTo').on('click',function(){
$('.box').fadeTo('slow',0.2);
});
.fadeToggle([duration][,easing][,complete])
匹配元素切换淡入(显示)和淡出(隐藏)的效果
$('.fadeToggle').on('click',function(){
$('.box').fadeToggle('slow');
});
三.滑动效果
.slideDown( [duration ] [, easing ] [, complete ] )
用滑动动画的效果显示匹配的元素
$('.slideDown').on('click',function(){
$('.box').slideDown('slow');
});
.slideUp( [duration ] [, easing ] [, complete ] )
用滑动动画的效果隐藏匹配的元素
$('.slideUp').on('click',function(){
$('.box').slideUp('slow');
});
.slideToggle( [duration ] [, easing ] [, complete ] )
用滑动动画显示或隐藏一个匹配元素
$('.slideToggle').on('click',function(){
$('.box').slideToggle('slow');
});
具体的动画演示：http://js.jirengu.com/xagoj/2/
四.动画队列
问题一：动画是同步还是异步的？
$('.hide').on('click',function(){
$('.box').hide(1400);
console.log('hide');
})
在上面这个例子中，执行代码后，如果是同步，应该是动画完成后控制台输出hide，但如果是异步，应该是动画还没有完成时，控制台已经输出hide（如果不是很明显，适当的增加时间）
结果是当动画还没有完成时，控制台就已经输出了hide，这说明动画是异步的
问题二：如果我想要动画完成后在输出，这样要怎么写？
我们只需要在动画方法中添加一个回掉函数
$('.hide').on('click',function(){
$('.box').hide(1400,function(){
console.log('hide');
});
})
可是如果我想让很多的效果一个个依次展示，是不是要这样（看下面的例子）
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('动画执行完毕')
})
})
})
})
})
})
这就叫回调地狱写法。。。。
我们可以换一种写法叫做jQuery动画队列的写法
$box.hide(1000)
.show(1000)
.fadeOut()
.fadeIn()
.slideUp()
.slideDown(function(){
console.log('动画执行完毕了')
})
动画队列其实就是动画队列执行的一个顺序机制，对于同一对象的动画效果会按照顺序放入到动画队列中，在动画队列中从下往上执行动画
image
五. 自定义动画
当上面的动画已经不满足需求的时候，jQuery提供了自定义动画的方法
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一个CSS属性和值的对象,动画将根据这组对象移动。
$('.animate').on('click',function(){
$('.box').animate({
left: '+=100',//对于左右的移动是在已经定位的前提下
width: '200px'
},500);
});
这与css差不多，只不过css是一下子变化，而animate是渐变的变化
