Web前端—JQuery 动态显示和隐藏(动画)
小职 2021-03-03 来源 : 阅读 1443 评论 0

摘要:本文主要介绍了Web前端—JQuery 动态显示和隐藏(动画),通过具体的内容向大家展现,希望对大家web前端jQuery开发的学习有所帮助。

本文主要介绍了Web前端—JQuery 动态显示和隐藏(动画),通过具体的内容向大家展现,希望对大家web前端jQuery开发的学习有所帮助。

Web前端—JQuery 动态显示和隐藏(动画)

JQuery 高级之动画

前言

jQuery动画的三种方式

1. 默认的显示和隐藏方式

2.滑动显示和隐藏方式

3.淡入淡出显示和隐藏方式

前言

最近复习了一下jQuery的一些内容,特此整理一下一些能用的得到的知识点,以前才学jQuery的时候压根就没有注意到那么多的细节,另外最近一直都在整理前端的一些工作中学到的小经验,大概还会有十篇左右的内容,就会慢慢开始整理后端,框架,以及数据库的一些小知识点

 

jQuery动画的三种方式

今天的知识点就一个jQuery动画的三种表示方式:

 

默认显示和隐藏方式

滑动显示和隐藏方式

淡入淡出显示和隐藏方式

1. 默认的显示和隐藏方式

1.1. show([speed,[easing],[fn]])

->如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。

1.2. hide([speed,[easing],[fn]])

->隐藏,如果选择的元素是隐藏的,这个方法将不会改变任何东西。

1.3. toggle([speed],[easing],[fn])

->如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

 

1. speed:动画的速度,可以自定义值(如:1000)毫秒数,它还有三个预定义的值(“slow”,“normal”, “fast”)

2. easing:用来指定切换效果,默认是"swing",可用参数"linear"

      ->swing:动画执行时效果是 先慢,中间快,最后又慢

      -> linear:动画执行时速度是匀速的

3. fn:在动画完成时执行的函数,每个元素执行一次。

 

以下所有的的speed,easing,function都是一样的

 

2.滑动显示和隐藏方式

2.1. slideDown([speed],[easing],[fn])

->通过高度变化(向下增大)来动态地显示所有匹配的元素。

2.2. slideUp([speed,[easing],[fn]])

->通过高度变化(向上减小)来动态地隐藏所有匹配的元素

2.3. slideToggle([speed],[easing],[fn])

->与toggle功能相同,只是显示的动画效果不同

 

3.淡入淡出显示和隐藏方式

3.1. fadeIn([speed],[easing],[fn])

->淡入效果(渐渐浮现)

3.2. fadeOut([speed],[easing],[fn])

->淡出效果(渐渐隐藏)

3.3. fadeToggle([speed,[easing],[fn]])

->与toggle功能相同,只是显示的动画效果不同

 

用法示例如下(示例):

 

 <img id="imgpic" src="../img/test.jpg" width="600px" height="600px"/>

 //默认方式

         $("#imgpic").toggle("slow");//

         $("#imgpic").show(5000,"linear");//5秒后匀速显示

         $("#imgpic").hide(5000,"swing");//5秒后隐藏,速度先先慢,中间快,最后又慢


我是小职,记得找我

✅ 解锁高薪工作

✅ 免费获取最新技术干货教程资源

Web前端—JQuery 动态显示和隐藏(动画)

本文由 @小职 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程