读者福利
========
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
由于篇幅过长,就不展示所有面试题了,想要完整面试题目的朋友(另有小编自己整理的2024大厂高频面试题及答案附赠)
淡出效果:
5.3 淡入淡出转换函数 fadeToggle
淡入显示效果:
淡出隐藏效果:
5.4 不透明度改变函数 fadeTo
不透明度切换效果:
六 :自定义动画 animate
参数含义:
6.1 自定义动画animate 案例
自定义动画改变效果:
一:显示与隐藏
=========
显示与隐藏在前期 jQuery 的文章里我们已经或多或少使用过了,那就是 show(),hide(),但是我们只是调用了一下这两个封装好的方法罢了。并没有给其内部设置参数,其实这两个方法是有隐藏参数的,当然 可以带参数可以不带参数。
- show ( **speed,**easing,fn ) :显示
- hide ( speed,easing,fn ) :隐藏
- toggle ( speed**,easing,fn** ) :显示隐藏切换
参数含义:
参数 | speed | easing | fn |
含义 | 速度参数,可写为 slow,nomarl, fast,也可以写成特定的毫秒数值 | 用来指定特定的过度效果,默认为 swing,可换为 linear,往往不写 | 回调函数,在动画执行完后调用动画函数内的内容 |
1.1 显示函数 show
show ( speed,easing,fn ),可以带参数可以不带参数,可以让元素显示,下面代码的意义为,显示的过程为5000毫秒(5秒) ,显示过后会调用回调函数,并且过程以 swing 的方式过渡
显示效果:
1.2 隐藏函数 hide
hide ( speed,easing,fn ),可以带参数可以不带参数,可以将显示的元素隐藏,以下代码含义为,隐藏的过程为5000毫秒(5秒) ,隐藏过后会调用回调函数,并且过程以 swing 的方式过渡
隐藏效果:
1.3 显示隐藏切换函数 toggle
toggle ( speed,easing,fn ) ,可以带参数可以不带参数,可以切换元素,其实是判断该元素是否显示,如果此元素是显示的,则给它隐藏,如果此元素是隐藏的,则给它显示。
切换
显示切换效果:
隐藏切换效果:![](https://img-blog.csdnimg.cn/f6aa985e1d824c8495e26c21014609b4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_20,color_FFFFFF,t_70,g_se,x_16)
二:滑动效果
========
上拉下拉的最终目的其实也是元素的显示与隐藏,还记得我们的下拉菜案案例吗?当时我们只用了移动光标使下拉盒子直接显示或隐藏,没有动态效果非常的丑陋,我们学习了这一节滑动效果,就可以使你的下拉菜单真正意义上的下拉,实现更完美的动画效果,下面介绍一下几种常用的:
- slideDown ( **speed,**easing,fn ) :下拉
- slideUp ( **speed,**easing,fn ) :上拉
- slideToggle ( **speed,**easing,fn ) :上拉下拉切换
参数含义:
参数 | speed | easing | fn |
含义 | 速度参数,可写为 slow,nomarl, fast,也可以写成特定的毫秒数值 | 用来指定特定的过度效果,默认为 swing,可换为 linear,往往不写 | 回调函数,在动画执行完后调用动画函数内的内容 |
2.1 下拉函数 slideDown
slideDown _( speed,easing,fn ),_可以带参数可以不带参数,可以让元素以下拉的形式慢慢显示出来
下拉
下拉效果:
2.2 上拉函数 slideUp
slideUp ( speed,easing,fn ) ,可以带参数也可以不带,可以让元素以上拉的形式慢慢隐藏起来
上拉
上拉效果:
2.3 上拉下拉切换函数 slideToggle
slideToggle ( speed,easing,fn ) ,可以带参数可以不带参数,可以切换元素上拉下拉,其实是判断该元素是否显示,如果此元素是显示的,则给它上拉隐藏,如果此元素是隐藏的,则给它下拉显示。
切换
下拉显示效果:
上拉隐藏效果:
三:事件切换
=======
有了下拉上拉的基础,我们就可以写一个下拉菜单真正意义上下拉的效果啦,为方便起见我们只写了一个下拉菜单,并且 css 在文章结构中就不展示啦,需要的话在文章末尾自己取哦,所谓事件切换,是 jQuery 为开发效率及减少代码冗余问题得来的一个函数,多用于有去有回的事件,例如鼠标移上移走,点击打开和点击关闭这类双重事件,下面说明一下其用法:
$( ‘ele’ ) . hover ( function() {触发函数} , function() {移除函数} )
我们先看看不用切换函数的话应该怎么写:
3.1 下拉菜单普通写法:
- 第一章
- 第二章
- 第三章
3.2 下拉菜单切换函数写法:
- 第一章
- 第二章
- 第三章
3.3 下拉菜单最简写法 ( 只有一个函数 ):
**实现原理:**里面只写一个函数的话,经过离开都会触发函数从而触发里面的内容
- 第一章
- 第二章
- 第三章
四:动画排队现象:
==========
动画函数一旦触发必定执行完毕,意味着如果刚才的下拉菜单我们迅速地经过了十次,那么哪怕你不再移动上去,它也会把这十次给做完,这就是动画排队现象,这明显是不符合我们对下拉菜单效果的期望的,因此我们需要学习如何停止动画排队现象
处理方法:stop ()
注意一定要放在动画函数的前面 !!!这个方法就是触发时先停止之前的动画,再执行本次动画函数,其实有些类似于排他思想
改进下拉菜单(停止了动画排队现象):
五:淡入淡出效果
=========
淡入淡出最终目的一样也是元素的显示与隐藏,只不过这个更有科技感,像隐身一样消失,再像隐身解除一样地显现出来,下面是淡入淡出的几个方法:
- fadeIn ( **speed,**easing,fn ) :淡入
- fadeOut ( **speed,**easing,fn ) :淡出
- fadeToggle ( **speed,**easing,fn ) :淡入淡出效果切换
- fadeTo ( speed,opacity,easing,fn ) :修改不透明度(speed,opcity 必写__)
参数含义:
参数 speed easing fn opacity 含义 速度参数,可写为 slow,nomarl, fast,也可以写成特定的毫秒数值 用来指定特定的过度效果,默认为 swing,可换为 linear,往往不写 回调函数,在动画执行完后调用动画函数内的内容 不透明度,取值 0-1
5.1 淡入函数 fadeIn
学习分享,共勉
题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
/strong>opacity含义速度参数,可写为 slow,nomarl, fast,也可以写成特定的毫秒数值用来指定特定的过度效果,默认为 swing,可换为 linear,往往不写回调函数,在动画执行完后调用动画函数内的内容不透明度,取值 0-1
5.1 淡入函数 fadeIn
学习分享,共勉
题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-DDAOWWgB-1715224228642)]