jQuery淡入 淡出 —— W3school 详解 简单易懂(五)

jQuery 效果 - 淡入淡出

  • jQuery 隐藏/显示
  • jQuery 滑动

通过 jQuery,您可以实现元素的淡入淡出效果。

效果演示

点击这里,隐藏/显示面板

jQuery fadeIn()

演示 jQuery fadeIn() 方法。

jQuery fadeOut()

演示 jQuery fadeOut() 方法。

jQuery fadeToggle()

演示 jQuery fadeToggle() 方法。

jQuery fadeTo()

演示 jQuery fadeTo() 方法。

jQuery Fading 方法

通过 jQuery,您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法:

$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);
});

亲自试一试

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法:

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法:

$("button").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000);
});

亲自试一试

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法:

$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);
});

亲自试一试

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

语法:

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法:

$("button").click(function(){$("#div1").fadeTo("slow",0.15);$("#div2").fadeTo("slow",0.4);$("#div3").fadeTo("slow",0.7);
});

亲自试一试

jQuery 效果参考手册

如需全面查阅 jQuery 效果,请访问 jQuery 效果参考手册。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/635969.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【面试】-科大讯飞日常实习面试

科大讯飞日常实习面试 提问的问题 面试30min,基本就是介绍项目以及提问java八股文,没有算法题 java保证线程安全的方法 需要根据具体场景选择合适的方法来保证线程安全。java中的异步请求如何实现你的SpringBoot项目怎么匹配在线人数请说出spring springMVC springboot之间的…

软考十大管理领域49个过程开展频次总结

1、仅开展一次或仅在预定义时点开展的项目管理过程 序号 过程 过程组 说明 1 制定项目章程 启动 项目章程尽量在整个项目期间保持不变 2 制订项目管理计划 计划 各种管理(程序性)计划和项目基准尽量在整个项目期间保持不变 3 规划范围管理 除规划沟通管…

【微信小程序开发】环境介绍和基本使用

文章目录 前言1. 项目的基本组成结构1.1 JSON 配置文件的作用1.2 如何新建小程序页面1.3 修改项目首页1.4 WXML 模板1.5 WXSS 样式1.6 JS 逻辑交互 2. 宿主环境2.1 什么是宿主环境2.2 通信模型2.3 运行机制2.4 组件2.4.1 view 组件的基本使用:2.4.2 scroll-view 组件…

强网杯2023 crypto

speed up 当时看到这个题目 也是觉得易懂 并且可以解出来的 但是数字实在是过大了兄弟 题目意思是计算2^27的阶乘,并获取得到每一位数的数字之和,flag即为该数字的sha256编码 2^27为134217728 gmpy2包是支持大数运算的,故利用其fac方法进行尝试,在等待一段时间后可以得到对…

【cuda】四、基础概念:Cache Tiled 缓存分块技术

缓存分块是一种内存优化技术,主要用于提高数据的局部性(Locality),以减少缓存未命中(Cache Miss)的次数。在现代计算机体系结构中,处理器(CPU)的速度通常比内存快得多。因…

2024第十二届中国(上海)国际流体机械展览会(CFME2024)

2024上海流体机械展|泵展|风机展|压缩机展 2024第十二届中国(上海)国际流体机械展览会(CFME2024) 泵阀门风机压缩机减变速机真空干燥设备展 时间:2024年11月25日-27日 地点:国家会展中心(上海虹桥) ◆展会背景: &q…

从 Context 看 Go 设计模式:接口、封装和并发控制

文章目录 Context 的基本结构Context 的实现和传递机制为什么 Context 不直接传递指针案例:DataStore结论 在 Go 语言中, context 包是并发编程的核心,用于传递取消信号和请求范围的值。但其传值机制,特别是为什么不通过指针传递…

服务器与普通电脑的区别,普通电脑可以当作服务器用吗?

服务器在我们日常应用中非常常见,手机APP、手机游戏、PC游戏、小程序、网站等等都需要部署在服务器上,为我们提供各种计算、应用服务。服务器也是计算机的一种,虽然内部结构相差不大,但是服务器的运行速度更快、负载更高、成本更高…

智慧工地解决方案及案例:PPT全文26页,附下载

关键词:智慧工地解决方案,智慧工地建设,智慧工地整体架构,数字化工地,智慧工程 一、智慧工地建设对传统建筑业的影响 1、提高了施工效率和质量:智慧工地建设采用了先进的信息技术和管理方法,可…

力扣343. 整数拆分(动态规划)

Problem: 343. 整数拆分 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 该题目可以抽象成动态规划中的爬楼梯模型,将整数的拆分类比为上台阶: 1.每个阶段可以从整数中划分出1、2、…k的一个整数 2.int dp[n 1] dp[i]表示为i的整数划分的最大…

Next-GPT: Any-to-Any Multimodal LLM

Next-GPT: Any-to-Any Multimodal LLM 最近在调研一些多模态大模型相关的论文,发现Arxiv上出的论文根本看不过来,遂决定开辟一个新坑《一页PPT说清一篇论文》。自己在读论文的过程中会用一页PPT梳理其脉络和重点信息,旨在帮助自己和读者快速了…

2024年华为OD机考高分攻略-完整题库-两周350分

华为OD是个不错的机会,很适合非软件行业到软件行业的转身。 但是很多同学之前没有软件基础,不知道该如何高效的准备OD机考。 我是一名软件培训老师,我的学生有上百人顺利通过了华为OD机考,并取得了高分,我将经验分享给大家,华为OD机试2周350分,高效复习策略: 1、牛客…

C语言辨析——int a=5;为什么++a=1能编译通过而a++=1不行呢?

1. 问题 有人问:int a5; 为什么a1能编译通过a=1编译错误呢? 解释:不管是a1还是a1在C编译环境下都无法编译通过,但在C中,a1可以编译通过,而a1无法编译通过,这也是C和C的一个不同。因…

线程池的简单介绍及使用

线程池 线程池的参数介绍拒绝策略 线程池的任务处理流程使用Executors创建常见的线程池 线程池的参数介绍 corePoolSize: (核心线程数)这是线程池中始终存在的线程数,即使这些线程处于空闲状态。maximumPoolSize:(最大线程数) 是线程池允许的最大线程数。keepAliveT…

免费200万Tokens 用科大讯飞API调用星火大模型服务

简介 自ChatGPT火了之后,国内的大模型发展如雨后春笋。其中的佼佼者之一就是科大讯飞研发的星火大模型,现在大模型已经更新到V3 版本,而且对开发者也是相当友好,注册就送200万tokens,讯飞1tokens 约等于 1.5 个中文汉字 或者 0.8 个英文单词…

安卓开发-day

一、安卓项目结构 1、manifests文件夹 Android系统配置文件夹,包含一个AndroidManifest.xml文件; AndroidMainifest.xml文件是每个android项目必须要包含的文件(项目唯一),创建项目时默认就会生成这个文件&#xff0…

【Python学习】Python学习21- 正则表达式(1)

目录 【Python学习】Python学习21- 正则表达式(1) 前言re.match函数实例 re.search方法re.match与re.search的区别参考 文章所属专区 Python学习 前言 本章节主要说明Python的正则表达式。 正则表达式是一个特殊的字符序列,它能帮助你方便的…

java常见面试题:如何使用Java进行JMS(Java Message Service)编程?

Java Message Service (JMS) 是一个用于创建、发送、接收和读取消息的 API。它允许应用程序通过消息队列或主题进行通信。以下是使用 Java 进行 JMS 编程的详细步骤: 添加 JMS 依赖 如果你使用 Maven,你可以添加以下依赖到你的 pom.xml 文件&#xff1…

2401vim,vim标号

标号简介 提供高亮,快速告诉用户有用信息.如,调试器在左侧列中有个表示断点的图标. 另一例可能是表示(PC)程序计数器的箭头.标号功能允许在窗口左侧放置标号或图标,并定义应用行的高亮. 此外,调试器还支持8到10种不同的标号和高亮颜色,见|NetBeans|. 使用标号有两个步骤: 1…

动态规划基础(一)引入

T a l k Talk Talk i s is is c h e a p cheap cheap , , , s h o w show show m e me me t h e the the c o d e code code 数字三角形 题目大意 给定数字金字塔,每个单位有自己的权值,问从顶端出发,到底端任意一点的所有路径中&a…