jQuery中的动画
show()方法和hide()方法
控制元素的显示与隐藏，可以为该方法添加参数，使得元素可以动起来。
- 可以为该方法传递一个速度关键字slow、normal、fast（600毫秒、400毫秒、200毫秒）
- 可以为该方法的显示速度指定一个数字，单位是毫秒（1000毫秒）
fadeIn()方法和fadeOut()方法
与show()方法不同的是，fadeIn()与fadeOut()方法只改变元素的不透明度。
slideDown()方法和slideUp()方法
slideDown()方法和slideUp()方法只会改变元素的高度
自定义动画方法animate()
animate(params,speed,callback);
- params：一个包含岩石属性及值的映射，比如{property1:'value1',prperty2:'value2',...}
- speed：速度参数，可选
- callback：在动画完成时的执行函数，可选
综合动画示例
$('div').mouseover(function () {
$(this).animate({
left: '+=300px',
top: '+=300px',
width: '200px',
height: '200px',
opacity: '0.3'
},2000).animate({
left: '+=300px',
top: '-=300px',
width: '100px',
height: '100px',
opacity: '1'
},2000).fadeOut('3000');
});
自定义动画方法animate()
在上例中，若想在动画完成之后为div元素添加一个边框css('border','1px solid #0f0')。这样并不能得到预期的效果，而实际效果就是，刚开始执行动画的时候，css()的方法就执行了。其根本原因在于css()并不会加入到动画队列中，而是会立即执行。
如果想要达到预期的效果，我们需要把使用回调函数callback来对非动画方法实现排队
停止动画和判断是否处于动画状态
1.停止元素的动画
很多时候我们需要停止匹配元素正在进行的动画，此时我们需要使用stop()方法
stop([clearQueue],[gotoEnd]);
参数clearQueue与gotoEnd都是可选的，都为Boolean值。clearQueue表示立即清空为执行完的动画，gotoEnd代表是否直接将正在执行的动画跳转到末状态。
直接使用stop()方法，则会立即停止当前正在执行的动画，如果接下来还有动画等待执行，则以当前状态开始接下来的动画。
当为一个使元素绑定hover事件之后，用户把光标移入元素时会触发动画效果，而当这个动画还没结束时，用户就将光标移出了。那么改变移出时执行的动画就会被放入队列中，等待光标移入的动画结束后再执行。因此如果光标 的移入移出过快的话，就会导致动画效果与光标的动作不一致。此时只需要在光标的移入移出的动画之前加入stop()方法，就可解决。
$('div').hover(function () {
$(this).stop().animate({
width: '200px',
});
},function () {
$(this).stop().animate({
height: '50px'
});
});
可是如果遇到组合动画
$('div').hover(function () {
$(this).stop().animate({
width: '200px',
}).animate({
left: '+=300px',
});
},function () {
$(this).stop().animate({
height: '50px'
});
});
这时的stop()只会停止正在进行的动画。如果动画正在执行第一阶段（改变width）鼠标触发移出事件之后，只会停止当前的动画，并继续执行改变left的动画，而光标移出事件要等这个动画完成后才能执行。在这种情况下，我们可以设置stop()方法的第一个参数为true，此时程序会把当前元素接下来的尚未执行动画全部清空。第二个参数gotoEnd用于直接让当前动画到达结束时刻，通常用于后一个动画需要基于前一个动画的末状态的情况。
2. 判断元素释放处于动画状态
在使用animate()动画的时候，要避免动画积累导致动画与用户的行为不一致。解决办法就是判断元素是否处于动画状态，如果元素不处于动画状态，才为元素添加新的动画。
及其重要，特别常用
if (!$(element).is(':animated')){ //判断元素释放处于动画状态
//如果没有处于动画状态，则添加新动画
}
3. 延迟动画
在动画执行过程中，如果想对动画进行延迟操作，可以使用delay()方法
$(this).animate({left: '400px'},3000)
.delay(1000)
.animate({top: '100px'},2000)
.delay(2000)
.animate({height: '100px'},800);
4. 其他动画方法
- toggle(speed,[callback]) 切换样式的可见状态
- sildeToggle(speed,[easing],[callback]) 通过高度的变化来切换元素的可见性
- fadeTo(speed,opacity,[callback]) 将元素的不透明度以渐进的方法调整到指定值
- fadeToggle(speed,[easing],[callback]) 通过不透明的变化来切换元素的可见性
动画队列
- 当在一个animate()方法中应用多个属性时，动画是同时发生的
- 当以链式写法应用动画方法时，动画是按顺序发生的
