title: 《锋利的jQuery》五、jQuery的动画
date: 2017-07-14 11:19:00
tags: 锋利的jQuery
show()和hide()
hide()方法是让元素隐藏，执行时候其实有两步，第一步是记住元素隐藏前的display属性值，第二步是将display设置为none。
show()方法会获取hide()第一步获取的那个属性并重新设置给元素的display属性。
这两个方法可以接收一个速度参数，显示和隐藏的毫秒值，$('#box').hide(1000)这样$('#box')元素从显示到隐藏会经过1000毫秒的动画过度，不会突然消失，执行过渡时，会同时改变元素的高度、宽度和不透明度，直至这三个属性都为0最后元素css会改为display: none。
参数也可以直接传入'slow'、'normal'、'fast'，分别代表600毫秒、400毫秒、200毫秒。也可以传入毫秒数。
fadeIn()和fadeOut()
与show()方法不同的是，这两个方法只改变不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到display:none。fadeIn()方法则相反。
slideUp()和slideDown()
改变元素的高度，如果一个元素是display:none，当调用slideDown()时，这个元素将由上至下延伸显示。slideUp()方法正好相反。元素将由下至上缩短隐藏。
以上几种动画第一个参数是速度，都可以传
'slow'、'normal'、'fast'参数或者直接传入毫秒数。第二个参数是easing，是动画的运动方式，可选'swing'、'linear'分别是慢-快-慢和匀速。第三个参数是callback回调函数。
自定义动画animate()
常用格式为animate(params,speed,easing,callback)。
params:一个包含样式属性及值的对象。例如{top:'200px',left:'200px'}
speed:速度参数，可选参数。
easing:设置动画的节奏，可选值是swing慢-快-慢和linear匀速，可选参数。
callback:在动画完成时执行的函数，可选参数。
定义一个普通的动画
$('#box').click(function(){
$(this).animate({left:'500px'},3000);
})
累加、累减动画
$('#box').click(function(){
$(this).animate({left:'+=500px'},3000);
})
在当前位置累加500px;当然也可以累减。
多重动画
同时改变元素的高度的位置。
$('#box').click(function(){
$(this).animate({
left:'500px',
height:'200px'
},3000);
})
先改变元素的位置，移动完成后再改变元素的高度。在left执行完之前不会改变height的值。这种有先后顺序执行的动画称为动画队列。
$('#box').click(function(){
$(this).animate({
left:'500px'
},3000).animate({
height:'200px'
},3000);
})
这里如果在最后直接写
.css(...)，那么会不等动画执行，直接执行css的改变。css()方法不会加入队列，只有动画的方法才能加入队列。如果想让非动画方法方法加入队列就要写在回调函数里。
停止动画
格式为：stop([clearQueue],[gotoEnd])
clearQueue和gotoEnd都是可选参数，布尔值。
clearQueue代表是否要清空未执行完的动画队列。gotoEnd代表是否将正在执行的动画跳转到末状态。
判断动画执行状态
使用animate要避免动画重复累计的执行，可以提前进行判断。
if(!$('#box')is(':animate')){
// 如果没有动画正在执行就加入新动画。
}
延迟动画
在动画执行过程中，如果想延迟执行，可以使用delay()方法。可以将队列中的函数延迟执行，参数是毫秒值。
$('#box').click(function(){
$(this).animate({
left:'500px'
},3000)
.delay(1000)
.animate({
height:'200px'
},3000);
})
用于交互的动画方法
toggle()
格式为：toggle(speed,easing,callback)
toggle()方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见的。相当于先后执行了show()和hide()。
slideToggle()
格式为：slideToggle(speed,easing,callback)
通过高度变化来切换匹配元素的可见性，这个动画效果只调整元素的高度。相当于先后执行了slideUp()和slideDown()方法。
可以设置参数speed、callback。
fadeTo()
格式为：fadeTo(speed,opacity,easing,callback)
把元素的不透明度以渐进的方式调整到指定的值。只调整元素的不透明度。
fadeToggle()
格式为：fadeToggle(speed,easing,callback)
通过不透明度来切换匹配元素的可见性，只能调整不透明度，相当于先后执行了fadeOut()和fadeIn()方法。
