jquery如何实现div渐隐效果

三种实现方法:1、用fadeOut()逐渐改变被选元素的不透明度,从可见到隐藏,语法“元素对象.fadeIn(渐隐时长)”;2、用fadeTo()逐渐改变被选元素的不透明度,语法“元素对象.fadeTo(渐隐时长,0)”;3、用fadeToggle()逐渐改变被选元素的不透明度,语法“元素对象.fadeToggle(渐隐时长)”。

本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

在jquery中,能实现div渐隐效果的有三个方法:

  • fadeOut() 方法

  • fadeToggle() 方法

  • fadeTo() 方法

1、fadeOut() 方法

fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(渐隐褪色效果)。

语法:

$(selector).fadeOut(speed,easing,callback)
参数 描述
speed 可选。规定褪色效果的速度。

可能的值:

  • 毫秒

  • “slow”

  • “fast”

easing 可选。规定在动画的不同点上元素的速度。默认值为 “swing”。

可能的值:

  • “swing” – 在开头/结尾移动慢,在中间移动快

  • “linear” – 匀速移动

提示:扩展插件中提供更多可用的 easing 函数。

callback可选。fadeOut() 方法执行完之后,要执行的回调函数。

示例:

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<script src="js/jquery-3.6.1.min.js"></script>		<script>			$(document).ready(function() {				$("button").click(function() {					$("#div1").fadeOut();					$("#div2").fadeOut("slow");					$("#div3").fadeOut(3000);				});			});		</script>	</head>	<body>		<p>以下实例演示了 fadeOut()  使用了不同参数的效果。</p>		<button>点击渐隐div元素。</button>		<br><br>		<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>		<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>	</body></html>

jquery如何实现div渐隐效果

2、fadeTo() 方法

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

语法:

$(selector).fadeTo(speed,opacity,callback);
  • 必需的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。

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

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

只需要将opacityc参数的值设置为0,即可实现渐隐效果。

$(document).ready(function() {	$("button").click(function() {		$("#div1").fadeTo("fast",0);		$("#div2").fadeTo("slow",0);		$("#div3").fadeTo(3000,0);	});});

jquery如何实现div渐隐效果

3、fadeToggle() 方法

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

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

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

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

jquery如何实现div渐隐效果

关于“jquery如何实现div渐隐效果”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“jquery如何实现div渐隐效果”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

文章标题:jquery如何实现div渐隐效果,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/25849

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月15日 下午11:45
下一篇 2022年9月16日 下午10:17

相关推荐

  • 【缺陷周话】第31期:错误的内存释放

    1、错误的内存释放方法 C语言中常见的内存申请函数包括malloc()、 realloc()、 calloc(),它们虽然功能不同,但都对应同一个内存释放函数 free(),C++中对内存的申请和释放采用new/delete、new []/delete[] 方式。不管是 C 语言还是 C++ 语言,…

    2022年9月20日
    55400
  • 电脑中的五角星怎么打出

    电脑中的五角星打出方法: 1、由于键盘上没有五角星,所以我们需要借助输入法。 2、不同输入法界面略有不同,下面以搜狗输入法为例。 3、首先打开语言栏,点击最右边的图标,打开“智能输入助手” 4、打开后,找到并点开“符号大全” 5、然后进入左上角的“特殊符号” 6、最后在其中点击“五角星”符号就可以打…

    2022年8月31日
    93300
  • how2heap注意点有哪些

    first-fit 我的理解是分割unsortedbin里面名列前茅个大于要分配的chunk,但是实际上并不是这样 测试程序 #include <stdio.h>#include <stdlib.h>#include <string.h>int main(){ i…

    2022年9月15日
    50700
  • 如何进行Apache Solr JMX服务RCE漏洞复现

    0x00简介 Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口。用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引;也可以通过Http Get操作提出查找请求,并得到XML格式的返回结果。 该漏洞源于默认配置文件solr.in.s…

    2022年9月13日
    56500
  • mysql触发器如何取消

    在mysql中,可以使用DROP TRIGGER语句来取消已经定义的触发器,语法为“DROP TRIGGER 表名.触发器名;”或者“DROP TRIGGER 触发器名; ”,触发器的名称在当前数据库中必须具有少数的名称;“表名”选项若不省略则表示取消与指定表关联的触发器。 本教程操作环境:wind…

    2022年9月20日
    61400
  • NSA新型APT框架DarkPulsar怎么用

    前言 2017年3月,ShadowBrokers放出了一份震惊世界的机密文档,其中包括两个框架:DanderSpritz和FuzzBunch。 DanderSpritz完全由插件组成,用于收集情报、利用漏洞和操控已接管的设备。它基于Java编写,提供类似于僵尸网络管理面板的图形界面以及类似Metas…

    2022年9月21日
    55800
  • MySQL优化器hash join怎么使用

    前言 数据库的优化器相当于人类的大脑,大部分时候都能做出正确的决策,制定正确的执行计划,走出一条高效的路,但是它毕竟是基于某些固定的规则、算法来做的判断,有时候并没有我们人脑思维灵活,当我们确定优化器选择执行计划错误时该怎么办呢,语句上加hint,提示它选择哪条路是一种常见的优化方法。 我们知道Or…

    2022年9月15日
    71000
  • css语言中漂浮的语法是什么

    css语言中的漂浮语法为“float:属性值;”。float属性用于定义元素在哪个方向浮动,会让盒子(元素)漂浮在标准流的上面,其周围的元素也会重新排列,直到它的外边缘碰到包含框或另一个浮动框的边框为止。该属性有三个属性值:1、“left”,定义元素向左浮动;2、“right”,定义元素向右浮动;3…

    2022年9月22日
    64500
  • MySQL数据库线上如何修改表结构

    一、MDL元数据锁 在修改表结构之前,先来看下可能存在的问题。 1、什么是MDL锁 MySQL有一个把锁,叫做MDL元数据锁,当对表修改的时候,会自动给表加上这把锁,也就是不需要自己显式使用。 当对表做增删改查的时候,加的是MDL读锁 当对表结构做变更修改的时候,加的是MDL写锁 读与读之间不互斥,…

    2022年9月8日
    67300
  • 怎么用Vue+java实现时间段的搜索

    实现效果如图: 标红的是需要注意的地方!Vue操作:1,如图: 2,如图:(数据初始化) 2.0初始化今天的日期和时间的样式: 2.1今天的日期: // 时间范围&ndash;start// daterangeLastInTime: [],// daterangeLastInTime: [n…

    2022年9月19日
    67900
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部