JQury动画

简介:

 .hide()隐藏元素、.show()显示元素和.toggle()切换显示或隐藏匹配元素

1   让页面上的元素不可见,一般可以通过设置css的display为none属性,但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性

2   .hide()隐藏元素

3   .hide( options )当提供hide方法一个参数时,.hide()就会成为一个动画方法,.hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作

4  .hide("fast / slow")动画设置的快捷方式,'fast' 和 'slow' 分别代表200和600毫秒的延时,就是元素会执行200/600毫秒的动画后再隐藏

5   jQuery在做hide操作的时候,会保存本身的元素的原始属性值,再通过对应的方法还原的时候还是初始值,如一个元素的display属性值为inline,那么隐藏再显示时,这个元素将再次显示inline,一旦透明度 达到0,display样式属性将被设置为none,这个元素将不再在页面中影响布局

6   .show()显示元素

7   hide是让元素显示到隐藏,show则是相反,让元素从隐藏到显示

8   show与hide方法是修改的display属性,通过visibility属性布局需要通过css方法单独设置

9   如果使用!important在你的样式中,比如display: none !important,如果你希望.show()方法正常工作,必须使用.css('display', 'block !important')重写样式

10   如果让show与hide成为一个动画,那么默认执行动画会改变元素的高度,高度,透明度

11   .toggle()切换显示或隐藏匹配元素,这是最基本的操作,处理元素显示或者隐藏,因为不带参数,所以没有动画,通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画,

12   如果元素是最初显示,它会被隐藏,如果隐藏的,它会显示出来

13   .toggle( [duration ] [, complete ] )提供参数,提供了时间、还有动画结束的回调,在参数对应的时间内,元素会发生显示/隐藏的改变,在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果

14   .toggle(display)直接定位,直接提供一个参数,指定要改变的元素的最终效果,确定是使用show还是hide方法



本文转自 拉考的考拉 51CTO博客,原文链接:
http://blog.51cto.com/lakaodekaola/2074442


相关文章
|
3月前
|
机器学习/深度学习 人工智能 架构师
Skill技术正在吃掉传统自动化框架的最后一块领地
本文深度解析AI测试范式革命:传统自动化脚本正被“Skill”技术重构。Skill非代码而是可复用的测试方法论;Agent、MCP、Skill三层协同,实现从“写脚本”到“搭能力”的跃迁。Cursor、Money Forward、OpenClaw等案例印证:测试工程师正升级为AI时代的Skill架构师。
|
JSON API 数据安全/隐私保护
农业银行模拟器,工商建设邮政中国银行,虚拟余额生成模拟器
这个银行模拟系统包含三个主要模块:核心银行账户逻辑、图形用户界面和REST API接口
|
自然语言处理 机器人
一款基于大模型的金融分析工具Finpilot
【2月更文挑战第11天】一款基于大模型的金融分析工具Finpilot
682 1
一款基于大模型的金融分析工具Finpilot
|
人工智能 搜索推荐
Science研究揭GenAI双刃剑:GenAI让个人创作出彩却令集体创意趋同
【8月更文挑战第19天】近期《Science》刊载的研究揭示了GenAI对个人创作与集体创意的双刃剑效应。GenAI能显著增强个人创作力,为艺术家提供新颖灵感,协助设计师优化作品,并通过个性化反馈帮助作家提升技能。然而,它也可能导致集体创意趋同,削弱多样性与创新。为平衡二者,研究建议鼓励创作者独立性、加强跨领域合作并建立多元评价体系。论文详情参见:https://www.science.org/doi/10.1126/sciadv.adn5290。
373 1
|
监控 供应链 新能源
万界星空科技/免费开源MES系统/免费自动排产管理
万界星空科技MES系统通过快速合理安排有限产能计划,计划更优化,实现最优生产计划排程,提高生产效率和设备利用率,达到对生产现场进行有效指导。
972 0
万界星空科技/免费开源MES系统/免费自动排产管理
|
芯片 异构计算
高通、英特尔发布办公本处理器,低功耗PK高性能
继9月2日英伟达发布RTX30系显卡之后,9月3日PC平台再出大新闻,英特尔和高通在同一天发布了针对轻薄本设计的处理器,与英特尔不同的是高通的处理器是基于ARM架构,二者侧重点略有不同,前者注重性能,后者则注重续航。
484 0
高通、英特尔发布办公本处理器,低功耗PK高性能
|
机器学习/深度学习 SQL 缓存
PyFlink Table API - Python 自定义函数
Python 自定义函数是 PyFlink Table API 中最重要的功能之一,其允许用户在 PyFlink Table API 中使用 Python 语言开发的自定义函数,极大地拓宽了 Python Table API 的使用范围。
PyFlink Table API - Python 自定义函数
|
存储 缓存 编解码
视图计算背后的技术架构思考
5G时代海量视图计算场景,阿里云边缘计算节点聚焦视频上云和处理方向,阿里云高级技术专家为您解读海量视图计算背后的技术与架构能力。
2182 0
视图计算背后的技术架构思考
|
弹性计算 运维 数据可视化
阿里云混合云管理平台发布 帮您管好云
6月9日, 在2020阿里云线上峰会上阿里云混合云战略正式发布:全栈建云、智能管云、极致用云。同步发布专有云敏捷版(Apsara Stack Agility)、 混合云管理平台(Apsara Uni-manager)以及下一代企业级一站式DevOps平台“云效”三大新品。
3469 0
阿里云混合云管理平台发布 帮您管好云
|
大数据 BI
“校企合作共推实践型大数据师资培养”2018阿里云全国高校师资高级研修班成功举办
本次师资研修班最大的特色,是让参加培训的老师沉浸式体验了阿里云大学基于“三实”理念所设计的实训课程体系。即通过“实际项目”、“实境训练”、“实战检验”将阿里云先进技术和深厚行业经验以项目实战的方式赋能高校和教师。
4310 0