首页 前端知识 你真的拿捏 jQuery 四大动画效果了吗?【入门篇超详细 零基础适用

你真的拿捏 jQuery 四大动画效果了吗?【入门篇超详细 零基础适用

2024-08-25 23:08:26 前端知识 前端哥 768 410 我要收藏

1.3 显示隐藏切换函数 toggle

​ 显示切换效果:

​ 隐藏切换效果:​

  二 :滑动效果

参数含义:

2.1 下拉函数 slideDown

​ 下拉效果:

2.2 上拉函数 slideUp

​ 上拉效果:

2.3 上拉下拉切换函数 slideToggle

​ 下拉显示效果:

​ 上拉隐藏效果:

  三 :事件切换

3.1 下拉菜单普通写法:

3.2 下拉菜单切换函数写法:

3.3 下拉菜单最简写法 ( 只有一个函数 ):

 四 :动画排队现象:

改进下拉菜单(停止了动画排队现象):

 五 :淡入淡出效果

参数含义:

5.1 淡入函数 fadeIn

​淡入效果:

5.2 淡出函数 fadeOut

​淡出效果:

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** )    :显示隐藏切换

参数含义:


参数speedeasingfn
含义速度参数,可写为 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 ) ,可以带参数可以不带参数,可以切换元素,其实是判断该元素是否显示,如果此元素是显示的,则给它隐藏,如果此元素是隐藏的,则给它显示。

切换

 显示切换效果:

 隐藏切换效果:


二:滑动效果

========

 上拉下拉的最终目的其实也是元素的显示与隐藏,还记得我们的下拉菜案案例吗?当时我们只用了移动光标使下拉盒子直接显示或隐藏,没有动态效果非常的丑陋,我们学习了这一节滑动效果,就可以使你的下拉菜单真正意义上的下拉,实现更完美的动画效果,下面介绍一下几种常用的:

  • slideDown ( **speed,**easing,fn )    :下拉
  • slideUp ( **speed,**easing,fn )         :上拉
  • slideToggle ( **speed,**easing,fn )   :上拉下拉切换

参数含义:


参数speedeasingfn
含义速度参数,可写为 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 下拉菜单普通写法:


目   录

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
img
img
img
img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新

如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
img

web浏览器中的javascript

  • 客户端javascript
  • 在html里嵌入javascript
  • javascript程序的执行
  • 兼容性和互用性
  • 可访问性
  • 安全性
  • 客户端框架

window对象

  • 计时器

  • 浏览器定位和导航

  • 浏览历史

  • 浏览器和屏幕信息

  • 对话框

  • 错误处理

  • 作为window对象属性的文档元素

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
img

包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新**

如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
[外链图片转存中…(img-rvTnCQir-1712808781568)]

web浏览器中的javascript

  • 客户端javascript
  • 在html里嵌入javascript
  • javascript程序的执行
  • 兼容性和互用性
  • 可访问性
  • 安全性
  • 客户端框架

window对象

  • 计时器

  • 浏览器定位和导航

  • 浏览历史

  • 浏览器和屏幕信息

  • 对话框

  • 错误处理

  • 作为window对象属性的文档元素

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-nx2yNEkF-1712808781569)]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16844.html
标签
评论
发布的文章

LoopBack组件JSONAPI使用指南

2024-09-04 23:09:43

编译JSONCPP源码

2024-09-04 23:09:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!