淡入淡出效果 (jQuery)
1jQuery中淡出动画fadeOut
让元素在页面不可见,常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的。这里要提一个透明度的方法,设置元素透明度为0,可以让元素不可见,透明度的参数是0~1之间的值,通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。
fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果
所谓"淡出"隐藏的,元素是隐藏状态不对作任何改变,元素是可见的,则将其隐藏。
.fadeOut( [duration ], [ complete ] )
通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串,或者这个duration参数被省略,那么默认使用400毫秒的延时
2jQuery中淡入动画fadeIn
fadeOut是淡出效果,相反的还有淡入效果fadeIn,方法使用上两者都是一致的,只是结果相反
.fadeIn( [duration ], [ complete ] )
- duration:指定过渡动画运行多长时间(毫秒数),默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。
- 元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。
fadeIn()函数用于显示所有匹配的元素,并带有淡入的过渡动画效果。
注意:
- 淡入的动画原理:操作元素的不透明度从0%逐渐增加到100%
- 如果元素本身是可见的,不对其作任何改变。如果元素是隐藏的,则使其可见
3jQuery中淡入淡出切换fadeToggle
fadeToggle()函数用于切换所有匹配的元素,并带有淡入/淡出的过渡动画效果。之前也学过toggle、slideToggle 也是类似的处理方式
fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。
常用语法:.fadeToggle( [duration ] ,[ complete ] )
可选的 duration 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是 fadeToggle完成后所执行的函数名称。
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
4jQuery中淡入效果fadeTo
淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性,但是他们都有个共同的特点,变化的区间要么是0,要么是1
fadeIn:淡入效果,内容显示,opacity是0到1 fadeOut:淡出效果,内容隐藏,opacity是1到0
如果要让元素保持动画效果,执行opacity = 0.5的效果时,要如何处理?
如果不考虑CSS3,我们用JS实现的话,基本就是通过定时器,在设定的时间内一点点的修改opacity的值,最终为0.5,原理虽说简单,但是总不如一键设置这么舒服,jQuery提供了fadeTo方法,可以让改变透明度一步到位
语法
.fadeTo( duration, opacity ,callback)
必需的 duration参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。可选的 callback 参数是该函数完成后所执行的函数名称。
转载于:https://www.cnblogs.com/jiajia-16/p/6160865.html
淡入淡出效果 (jQuery)相关推荐
- JQuery:多张图片的淡入淡出效果。
我们要实现一个这样子的一个动画:多张图片在相同的位置淡入淡出,实现图片的轮流展示.具体实现的思路: 使用定时器setInterval方法,setInterval(<要调用的方法>,时间延时 ...
- html淡化效果,jQuery实现基本淡入淡出效果的方法详解
本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元 ...
- html实现新闻滚动效果,jQuery实现新闻播报滚动及淡入淡出效果示例
这篇文章主要介绍了jQuery实现新闻播报滚动及淡入淡出效果,结合实例形式分析了基于jQuery插件的页面元素动态变换相关操作技巧,需要的朋友可以参考下 本文实例讲述了jQuery实现新闻播报滚动及淡 ...
- jQuery 实现淡入淡出效果
上一节我们学习了如何实现元素的显示与隐藏,本节我们来学习如何实现元素的淡入淡出效果. fadeIn()方法 fadeIn() 方法用于淡入已隐藏的元素. 语法如下所示: $(selector).fad ...
- 004_淡入淡出效果
1. jQuery淡入淡出方法 1.1. 通过jQuery, 您可以实现元素的淡入淡出效果. 1.2. jQuery拥有下面四种fade方法: fadeIn().fadeOut().fadeToggl ...
- 淡入淡出效果 || 高亮显示案例
淡入淡出效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- C# 仿金山毒霸启动和关闭淡入淡出效果
C# 仿金山毒霸启动和关闭淡入淡出效果 原文 C# 仿金山毒霸启动和关闭淡入淡出效果 01 #region 窗体关闭效果 02 03 #region 私有方法 04 [DllImportAttri ...
- 使用Tesseract (OCR)实现简单的验证码识别(C#)+窗体淡入淡出效果
来园子也有一段时间了,一直没时间写点东西,说实话刚开始也不知道写什么,一直以来对验证码识别比较感兴趣,曾经想着自己处理图形实现识别验证码, 不过感觉对我来说太难了,偶然中再网上发现了Tesseract ...
- 使用C#实现Form窗体的淡入淡出效果
using System.Runtime.InteropServices; public class Win32 { public const Int32 AW ...
最新文章
- Microsoft Security Essentials 4.1.522.0 RTM
- 不甘心只做输入工具,搜狗输入法上线AI助手,提供智能服务
- 爱可可推荐!关于竞赛思路,方法和代码实践,Datawhale数据竞赛Baseline开源分享!...
- 精心整理,机器学习的3大学习资源
- 数据中心未来会被以太网交换器商用IC占领吗?
- vxlan 资料及其在 neutron中的应用
- linux telnet smtp,如何使用Telnet测试IMAP与SMTP
- EntityFrameWork连接多Db配置
- 黄聪:wordpress博客用Slimbox2实现lightbox效果(免插件)(转)
- springMVC浏览器接受json报406错误的解决方法
- 一文看懂测试自动化的玄妙
- 检测空指针 静态检测_Parasoft为G3提供专注于安全性和整体软件质量的静态分析解决方案...
- 微服务网关 gateway
- linux 3 4文件管理ppt,第8单元-Linux系统文件查找与文件管理.ppt
- 完全兼容ADI的ADM2582E/ADM2587E的(MORNSUN)TD(H)541S485H
- 微信ios上下拉网页禁止
- 【伪大数据】对QQ空间指定好友2017年说说数据的分析
- Shader Graph学习(一)
- 联盟链系列 - RootCA颁发证书
- JDBC Statement RETURN_GENERATED_KEYS返回自动生成的ID
热门文章
- php dom对象,JavaScript_JavaScript DOM 对象深入了解,什么叫DOM,DOM是文档对象模型( - phpStudy...
- dede图片轮播php代码,织梦图片集利用JS输出图片轮播
- keytool错误: java.lang.RuntimeException: 用法错误,and 不是合法的命令【转】
- 线段树、前缀数组:HDU1591-Color the ball(区间更新、简单题)
- 论闷声挣大钱与网红现象
- EC读书笔记系列之18:条款47、48
- getifaddrs
- eclipse创建maven web工程,以及maven工程转化为web工程的简单介绍。
- android 弹出软键盘将底部视图顶起问题
- Flutter 基础Widgets之容器Container详解