权文哲_20200120-权文哲

知识点总结

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来制作动画效果以及其他操作确实很方便。遗憾的是大家由于疫情的原因可能要提前回家了,晚上都也在赶展示作品,由于时间的原因,我这次作品可能会比较水一些,但来的这些天,我确实收获很多,还是非常感谢云创动力给提供的这次机会,以及马老师的细心讲解。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1