jquery淡入淡出fadeIn() fadeOut()

最新推荐文章于 2023-06-16 15:08:59 发布
最新推荐文章于 2023-06-16 15:08:59 发布
阅读量476 收藏
点赞数 1
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjhwqx/article/details/52596251
版权
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#button2").click(function(){
$("#div1").fadeOut(3000);
$("#div2").fadeOut(2000);
$("#div3").fadeOut(1000);
});
});
</script>
</head>


<body>
<p>演示带有不同参数的fadeIn()方法</p>
<button id="button1">点击这里，使三个矩形淡入</button>
<button id="button2">点击这里，使三个矩形淡出</button><br /><br /><br /><br />
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>

</html>



<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").fadeToggle("1000")   //褪色开关
});
});
</script>
</head>
<body>
<p>演示点击图片图片淡入淡出</p>
<button>点我淡入淡出</button><br /><br />
<div style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("1000",0.1);
$("#div2").fadeTo("slow",0.5);
$("#div3").fadeTo("slow",0.5);
$("div").fadeTo("slow",1)//还原到1
});
});
</script>
</head>
<body>
<p>演示不同参数fadeTo()方法</p>
<button>点我淡入淡出</button><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

jony0303
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery 实现淡入淡出效果
天空之外
09-12 715
上一节我们学习了如何实现元素的显示与隐藏，本节我们来学习如何实现元素的淡入淡出效果。 fadeIn()方法 fadeIn() 方法用于淡入已隐藏的元素。 语法如下所示： $(selector).fadeIn(speed,callback); speed：规定效果的时长，可选值有 slow、fast 或毫秒。 callback：是 fading 完成后所执行的函数名称。 示例： 例如当我们点击按钮时，将紫色正方形设置为淡入效果： <!DOCTYPE html> <html> &l
jquery淡入淡出效果简单实例
10-22
主要介绍了jquery淡入淡出效果简单实现方法,以完整实例形式分析了jQuery中fadeIn及fadeOut实现淡入淡出的相关技巧,需要的朋友可以参考下
jQuery淡入淡出fadeIn() fadeOut() fadeToggle() fadeTo()
gzxiaomei的博客
07-22 563
通过 jQuery，您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法： fadeIn() fadeOut() fadeToggle() fadeTo() 1,jQuery fadeIn() 方法 Query fadeIn() 用于淡入已隐藏的元素。 语法： $(selector).fadeIn(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是 fading 完
jQuery淡入淡出
goodcaoyu的博客
11-02 981
jQuery 提供了下面几种方法可以实现显示的淡入淡出效果： fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn()方法 fadeIn() 实现淡入效果，其基本语法如下： $(selector).fadeIn(speed,callback); 可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒） 第二个可选参数为回调函数，在fadeIn()方法结束后调用。 $("button").click(function(){
原生JavaScript实现jQuery中的fadeIn和fadeOut淡入/出效果
LaoYe的博客
05-10 4132
目录 一、前言 二、需求分析 三、功能实现 3.1 HTML代码 3.2 JavaScript初始化代码 3.3 淡入效果 --- 仿jQuery中的fadeIn()函数 3.4 淡出效果 --- 仿jQuery中的fadeOut()函数 3.5 淡入/淡出效果 --- 仿jQuery中的fadeTo...
jQuery之淡入、淡出
06-16 433
总结：淡入是透明度从0到1，淡出是透明度1到0，淡入到多少就是设置哟古额to。
JQuery淡入淡出效果
jiongrizi的博客
06-04 336
jQuery 拥有下面四种 fade 方法实现淡入淡出效果： fadeIn()    淡入已隐藏的元素 fadeOut()   淡出可见元素 fadeToggle()   如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。 fadeTo()    允许渐变为给定的不透明度（值介于 0 与 1 之间）
jQuery学习笔记（5）效果——淡入淡出
DTCloud
04-25 2161
文章目录jQuery fade方法fadeIn() 方法fadeOut() 方法fadeToggle() 方法fadeTo() 方法 jQuery fade方法 通过 jQuery中的几个fade方法，各位读者可以实现元素的淡入淡出效果。 jQuery中存在以下种4种 fade 方法： fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn() 方法 该方法用于淡入已经隐藏的元素。 基本语法： $(selector).fadeIn(speed,callback);
jQuery之淡入淡出效果
leejj_520的博客
04-27 477
1. jQuery中淡出动画fadeOut 让元素在页面不可见，常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的。这里要提一个透明度的方法，设置元素透明度为0，可以让元素不可见，透明度的参数是0~1之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。   fadeOut()函数用于隐藏所有匹配的元素，并带有
jQuery-淡入淡出
qq_39111074的博客
10-11 211
淡入淡出，改变透明度 fadeIn()- - -淡入（显示） fadeOut()- - -淡出（消失） fadeToggle()- - -（显示消失切换） fadeTo()- - -改变透明度; fadeTo(动画时间，要变成的透明度)，透明度0~1 fadeTo使用示例 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
10-26
在本示例中，我们将深入探讨jQuery中的两个关键动画方法：`fadeIn` 和 `fadeOut`，它们用于实现元素的淡入淡出效果。 `fadeIn()` 方法用于使元素逐渐变得可见，而`fadeOut()` 方法则让元素逐渐变得不可见。这两个...
jquery 淡入淡出效果的简单实现
10-26
jQuery 淡入淡出（FadeIn/FadeOut）效果是网页动态展示中常见的动画技巧，主要用于元素的可见性变化，让元素以平滑的透明度过渡从不可见变为可见，或者从可见变为不可见。在 jQuery 中，这两个功能非常简单易用，...
Jquery淡入淡出幻灯片特效图片切换源码下载
11-17
在这个“Jquery淡入淡出幻灯片特效图片切换”源码中，主要应用了jQuery的动画功能和定时器功能。 淡入淡出效果是jQuery中最常见的动画效果之一，主要通过`.fadeIn()`和`.fadeOut()`两个方法实现。`.fadeIn()`方法...
jQuery实用淡入淡出幻灯片
04-07
在jQuery淡入淡出幻灯片中，"淡入淡出"过渡效果是关键。这个效果利用了jQuery的fadeIn()和fadeOut()函数，这两个函数分别用于使元素逐渐变为可见和逐渐变为不可见。通过控制这些函数的执行顺序和时间间隔，可以实现...
【SCI顶级】金豺算法GJO-CNN-LSTM-Multihead-Attention温度预测【含源码 5741期】.zip
最新发布
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
2023睿抗机器人开发者大赛.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
【JCR一区级】飞蛾扑火算法MFO-CNN-LSTM-Attention故障诊断分类预测【含源码 5668期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
SCI一区】蚁狮算法ALO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5651.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
Jquery 淡入淡出的用法
03-08
Jquery 淡入淡出的用法是通过使用 .fadeIn() 和 .fadeOut() 方法来实现的。例如，使用 .fadeIn() 方法来使一个元素淡入，可以这样写代码：$(element).fadeIn(); 同样地，使用 .fadeOut() 方法来使一个元素淡出，可以这样写代码：$(element).fadeOut(); 可以通过设置参数来控制淡入淡出的速度和效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jony0303

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值