jQuery动画

show / hide /toggle

可以显示和隐藏DOM元素

可以传递一个时间参数进去，就变成了动画，从左上角收缩

div.hide(3000); //在3秒内消失

toggle() 类似一个开关，根据当前的状态决定是show还是hide

 

 

slideUp / slideDown/slideToggle

垂直收缩

slideToggle() 类似一个开关，根据当前的状态决定是slideUp还是slideDown

 

fadeIn / fadeOut/fadeToggle

淡入淡出的动画效果，通过不断地设置opacity实现

fadeToggle() 类似一个开关，根据当前的状态决定是fadeIn还是fadeOut

 

自定义动画animate

animate({style},time,callback)

 

第一个参数是要实现的css状态，第二个参数决定在几秒内达到效果，第三个参数是动画结束后的回调函数

 

串行动画

jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停

因为动画需要执行一段时间，所以jQuery必须不断返回新的Promise对象才能后续执行操作，我们可以这样写：

div.slideDown(2000)
   .delay(1000)
   .animate({
       width: '256px',
       height: '256px'
   }, 2000)
   .delay(1000)
   .animate({
       width: '128px',
       height: '128px'
   }, 2000);
}

为什么有的动画没有效果

1.很多不是block性质的DOM元素

2.jQuery没有实现对background-color的动画效果