jQuery 效果 - 淡入淡出
效果附上:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>fadein()方法</title><style>//下面的例子演示了带有不同参数的 fadeIn() 方法:div{width: 100px;height: 100px;display: none;text-align: center;}#div1{background-color: green;}#div2{background-color: yellow;}#div3{background-color: red;}</style>
</head>
<body>
<script src="../jquery-3.6.0.js"></script><button>按钮淡入p1</button><div id="div1">green</div><div id="div2">yellow</div><div id="div3">red</div><script>$(document).ready(function(){$('button').click(function(){$('#div1').fadeIn(1000);$('#div2').fadeIn();$('#div3').fadeIn();})})</script></body>
</html>
jQuery fadein()方法
隐藏该元素。
语法:$(selector).fadeIn(speed,callback);
和之前的jQuery 效果-隐藏/显示的用法一致
jQuery 效果- 隐藏和显示_nanchen的博客-CSDN博客
注意:
fadeIn() 用于淡入已隐藏的元素。
语法:$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>fadein()方法</title><style>div{width: 100px;height: 100px;display: none;text-align: center;}#div1{background-color: green;}#div2{background-color: yellow;}#div3{background-color: red;}</style>
</head>
<body><!-- fadeIn() 用于淡入已隐藏的元素。
语法:$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法: -->
<script src="../jquery-3.6.0.js"></script><button>按钮淡入p1</button><div id="div1">green</div><div id="div2">yellow</div><div id="div3">red</div><script>$(document).ready(function(){$('button').click(function(){$('#div1').fadeIn(1000);$('#div2').fadeIn();$('#div3').fadeIn();})})</script>
</body>
</html>
jQuery fadeOut() 方法
淡出
语法:$(selector).fadeOut(speed,callback);
代码就不演示了,直接引入淡出方法即可
效果如图:
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在前两种方法中进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:$(selector).fadeToggle(speed,callback);
其效果与第一张图片和第一张代码一致
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:$(selector).fadeTo(speed,opacity,callback);
效果:
代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;}#div1 {background-color: blue;}#div2 {background-color: blue;}#div3 {background-color: blue;}</style>
</head><body><button>调整盒子不透明度</button><div id="div1">1</div><div id="div2">2</div><div id="div3">3</div><script src="../jquery-3.6.0.js"></script><script>// 语法$(selector).fadeTo(speed,opacity,callback);// 必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。$('button').click(function () {$('#div1').fadeTo('show', 0.1); //透明度只能在0~1之间$('#div2').fadeTo('show', 0.4);$('#div3').fadeTo('show', 0.8);})</script>
</body></html>
总结:
一、fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。
二、fadeTo() 没有默认参数,必须加上 slow/fast/Time 。
jQuery 效果 - 淡入淡出相关推荐
- jQuery 效果 – 淡入淡出
在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuery ...
- jQuery学习教程五:jQuery 效果 - 淡入淡出, Fading 方法
实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法. <!DOCTYPE html> <html> <head> <script ...
- jQuery 效果 - 淡入淡出fadeIn()、fadeOut、fadeTo、fadeToggle()示例
fadeIn():通过将它们淡入淡出来显示匹配的元素. <!DOCTYPE HTML> <html lang="en"> <head><m ...
- jquery的淡入,淡出事件 fadeIn fadeOut
jquery的淡入,淡出事件 fadeIn fadeOut 1. fadeIn() 方法使用淡入效果来显示被选元素,(该元素是隐藏的) $(selector).fadeIn(speed,callb ...
- jQuery 实现淡入淡出效果
上一节我们学习了如何实现元素的显示与隐藏,本节我们来学习如何实现元素的淡入淡出效果. fadeIn()方法 fadeIn() 方法用于淡入已隐藏的元素. 语法如下所示: $(selector).fad ...
- jQuery的淡入淡出
fade方法 有四个方法 fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn() 淡入已隐藏的元素 $("button").click( ...
- 播放器实现声音效果淡入淡出
目录 1.前言 2.基本代码 3.延伸思考问题 4.开始播放-淡入 5.停止播放-淡出 6.完整基本代码修改 1.前言 由于切歌会有爆破音的问题.方案有很多,比如音频合成淡入淡出fadein,fade ...
- Vue3 路由增加过度效果-淡入淡出
一.Vue3 的路由动画设置方式发生变换 想要在你的路径组件上使用转场,并对导航进行动画处理,你需要使用 v-slot API <router-view v-slot="{ Compo ...
- jQuery -- 光阴似箭(二):jQuery效果的使用
jQuery -- 知识点回顾篇(二):jQuery效果的使用 1. jQuery 效果 -- 隐藏和显示: 使用 hide() 和 show() 方法来隐藏和显示 HTML 元素. <!DO ...
最新文章
- python 中的短路逻辑是什么?
- 小波变换原理_小波变换的知识,转载的
- php mysql搭建_PHP+MYSQL的搭建_MySQL
- away3d 4.0.9Gold 学习笔记 加载模型(6)
- GaussDB(for MySQL) HTAP只读分析特性详解
- 电力物联网智慧路灯充电桩传感器技术应用方案
- 远程桌面和云主机,可以听到云主机内部的声音
- 用计算机视频,如何用计算机做视频
- LeetCode60:Permutation Sequence
- ASP.NET Core开发Docker部署
- python之__repr__
- charshow需求说明
- app接码教程,附源码
- No.11软件工程的过程管理
- python爬网易新闻_爬虫入门:如何用python爬取网易新闻?
- 学习笔记图片从本地复制到csdn博客出现:外链图片转存失败:解决方法
- aws php sns,使用 AWS SNS 发送通知到 HTTP 终端
- mac无法安装dmg文件,报无可装载系统错误
- 详解Python中列表切片及浅拷贝的关系(下)
- T83310 【音乐会】二重变革