jQuery的隐藏和显示动画效果 及 自定义动画

一、jQuery的隐藏和显示动画效果

1、基本隐藏与显示

jQuery的隐藏和显示动画效果 及 自定义动画_第1张图片 jQuery的隐藏和显示动画效果 及 自定义动画_第2张图片

隐藏:

jQuery的隐藏和显示动画效果 及 自定义动画_第3张图片jQuery的隐藏和显示动画效果 及 自定义动画_第4张图片

显示:

jQuery的隐藏和显示动画效果 及 自定义动画_第5张图片jQuery的隐藏和显示动画效果 及 自定义动画_第6张图片

jQuery的隐藏和显示动画效果 及 自定义动画_第7张图片

第一个参数:有过渡的动画效果

jQuery的隐藏和显示动画效果 及 自定义动画_第8张图片

第二个参数:linear表示线性变化

第三个参数:回调函数,动画执行结束触发

隐藏之后显示出来:

jQuery的隐藏和显示动画效果 及 自定义动画_第9张图片

DOM已经显示则隐藏,已经隐藏则显示:用toggle函数

jQuery的隐藏和显示动画效果 及 自定义动画_第10张图片

2、卷帘效果

卷帘隐藏:

jQuery的隐藏和显示动画效果 及 自定义动画_第11张图片(动画效果就是像帘子一样向上收起来)

卷帘显示:

jQuery的隐藏和显示动画效果 及 自定义动画_第12张图片(动画效果就是像帘子一样向下展开)

卷帘切换:

DOM已经卷帘显示则卷帘隐藏,已经卷帘隐藏则卷帘显示:用slidetoggle函数

jQuery的隐藏和显示动画效果 及 自定义动画_第13张图片

3、透明效果

jQuery的隐藏和显示动画效果 及 自定义动画_第14张图片

jQuery的隐藏和显示动画效果 及 自定义动画_第15张图片

jQuery的隐藏和显示动画效果 及 自定义动画_第16张图片

 

二、jQuery自定义动画

jQuery的隐藏和显示动画效果 及 自定义动画_第17张图片

你可能感兴趣的:(jquery,前端,javascript)