知识点总结

jQuery动画

（1）显隐动画

show():显示 hide():隐藏

原理：hide()通过改变元素的高度宽度和不透明度，直到这三个属性值到0
show()从上到下增加元素的高度，从左到右增加元素宽度，从0到1增加透明度，直至内容完全可见
参数：
show(speed,callback)
speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
callback: 动画完成时执行的方法
显示和隐藏式一对密不可分的动画形式

（2）显隐切换

toggle():切换元素的可见状态
原理：匹配元素的宽度、高度以及不透明度，同时进行动画，隐藏动画后将display设置为none
参数：
toggle(speed)
toggle(speed,callback)
toggle(boolean)
speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
easing： 使用哪个缓冲函数来过渡的字符串(linear/swing)
callback： 动画完成时执行的方法
boolean:true为显示 false为隐藏

（3）显隐滑动效果

slideDown():滑动隐藏

slidUp():滑动显示

参数:

slideDown(speed,callback)
slidUp(speed,callback)

（4）显隐切换滑动

slideToggle():显隐滑动切换
参数:
slidUp(speed,callback)

（5）淡入淡出

fadeIn()

fadeOut()

参数：

fadeIn(speed,callback)
fadeOut(speed,callback)
设置淡出透明效果
fadeTo()：以渐进的方式调整到指定透明度
参数：
fadeTo(speed,opacity,callback)

（6）

渐变切换:结合fadeIn和fadeOut

fadeToggle()
参数:
fadeOut(speed,callback)

（7）

自定义动画：animate()

注意：在使用animate方法之前，为了影响该元素的top left bottom right样式属性，必须先把元素的position样式设置为relative或者absolute
停止元素的动画
很多时候需要停止匹配正在进行的动画，需要使用stop()
stop()语法结构：stop([clearQueue],[gotoEnd]);
都是可选参数，为布尔值
如果直接使用stop()方法，会立即停止当前正在进行的动画

（8）判断元素是否处于动画状态

如果不处于动画状态，则为元素添加新的动画，否则不添加
if(!$(element).is(":animated")){ //判断元素是否处于动画状态}
这个方法在animate动画中经常被用到，需要注意

（9）延迟动画

在动画执行过程中，如果你想对动画进行延迟操作，那么使用delay()
用animate模拟show():

show: 表示由透明到不透明
toggle: 切换
hide:表示由显示到隐藏

心得体会

今天早上学习了jQuery动画，直到今天我才算真正的会用一点jQuery了，昨天光会照着敲，但不理解。所以今天收获还是蛮大的，用jQuery来制作动画效果以及其他操作确实很方便。遗憾的是大家由于疫情的原因可能要提前回家了，晚上都也在赶展示作品，由于时间的原因，我这次作品可能会比较水一些，但来的这些天，我确实收获很多，还是非常感谢云创动力给提供的这次机会，以及马老师的细心讲解。