动画
- 逐渐缩放
$().show(speed,function)显示 time是动画的时间，可以是
$().hide(speed,function)隐藏time为可选项
$().toggle(speed,function)隐藏显示切换 - 淡入淡出
$().fadeIn(speed,function)显示
$().fadeOut(speed,function)隐藏
$().fadeToggle(speed,function)隐藏显示切换 - 拉上拉下
$().sideDown(speed,function)拉下去（显示）
$().sideUp(speed,function)拉上来（隐藏）
$().sideToggle(speed,function)隐藏显示切换
给一个元素添加多个动画效果的时候，就有了动画队列，队列里的动画效果会依次实现
动画的异步
html+css
<button class="btn1">button</button>
<div class="box"></div>
<style>
.box {
position:absolute;
width:100px;
height:100px;
background:yellowgreen;
}
</style>
jQuery
$('.btn1').on('click',function(){
$('.box').hide(1000)
console.log('hide')//立即执行
})
这里会立即输出hide，接着动画完成，说明动画是异步执行的，如果要在动画完成之后输出hide，则需要在动画里面添加回调函数
$('.btn1').on('click',function(){
$('.box').hide(1000,function(){
console.log('hide')
})
})
hide会在动画完成后输出，如果要在前一个动画执行完成之后再执行下一个动画，可以用这种回调函数的方式，嵌入多层函数，这就是动画队列。
$('.btn1').on('click',function(){
$('.box').hide(1000,function(){
console.log('动画1完成')
$('.box').show(1000,function(){
console.log('动画2完成')
$('.box').fadeOut(1000,function(){
console.log('动画3完成')
$('.box').fadeIn(1000,function(){
console.log('动画4完成')
})
})
})
})
})
以上代码也可以这样写，动画队列遵循先进先出的原则
$('.btn1').on('click',function(){
$('.box').hide(1000)
.show(1000)
.fadeOut(1000)
.fadeIn(1000)
})
动画队列
自定义动画
指定动画形式及结果样式属性，对象中的每一个属性都表示一个可以变化的样式属性，所有指定属性必须用驼峰式，如果需要移动位置，需要将该元素的css样式
position设置为relative、relative、fixed。
$('.btn1').on('click',function(){
$('.box').animate({left:200},1000)
.animate({top:100},500)
.animate({left:0},1000)
.animate({top:0},500)
})
停止动画stop([clearQueue],[jumpToEnd])
clearQueue布尔值类型，默认false，是否清除后面的动画队列
jumpToEnd布尔值类型，默认false，是否跳到动画最后
$('.btn2').on('click',function(){
$('.box').stop(true,false)//立即停止动画
})
$('.btn3').on('click',function(){
$('.box').stop(true,true)//清空后面的动画队列，跳转到此项动画的最后一帧
})
