005-jQuery效果-淡入淡出

最新推荐文章于 2024-07-31 16:33:32 发布
最新推荐文章于 2024-07-31 16:33:32 发布
阅读量370 收藏
点赞数
分类专栏： jQuery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43404791/article/details/122614655
版权 
<!DOCTYPE html>
<html>
	<!--jQuery效果-淡入淡出
	jQuery Fading方法
		通过jQuery,您可以实现元素的淡入淡出效果
		jQuery拥有下面四种fade方法:
		fadeIn()
		fadeOut()
		fadeToggle()
		fadeTo()
	jQuery fadeIn()方法
		jQuery fadeIn()用于淡入已隐藏的元素
		语法
		$(selector).fadeIn(speed, callback);
		可选的speed参数规定效果的时长.他可以取以下值:"slow","fast"或者毫秒
		可选的callback参数时fading完成后所执行的函数名称
		下面例子展示了faseIn()方法
		$(document).ready(function(){
			$("button").click(function(){
				$(".div1").fadeIn();
				$(".div2").fadeIn("slow");
				$(".div3").fadeIn(3000);
			});
		})
	jQuery fadeOut()方法
		jQuery fadeOut()方法用于淡出可见元素
		语法
		$(selector).fadeOut(speed, calllback);
		可选的speed参数规定效果的时长,他可以取以下值"slow", "fast"或者毫秒
		可选的callback参数fading完成后所执行的函数名称
		下面的例子演示了带有不同参数的fadeOut()方法
		实例
		$("#fadeOutBtn").click(function(){
			$(".div1").fadeOut(3000);
			$(".div2").fadeOut(2000);
			$(".div3").fadeOut(1000);
		})
	jQuery fadeToggle()方法
		jQuery fade Toggle()方法可以在fadeIn(), fadeOut方法之间切换
		如果元素已经淡出,则fadeToggle()会向元素添加淡入效果
		如果元素已经淡入,则fadeToggle()会向元素添加淡出效果
		语法
		$(selector).fadeToggle(speed, callback);
		可选的speed参数规定效果的时长,他可以取下值:"slow", fast或者毫秒
		可选的callback参数时fading 完成后所执行的函数名称
		下面例子演示了带有不同参数的fade Toggle()方法
		$("#fadeToggleBtn").click(function(){
			$(".div1").fadeToggle(1000);
			$(".div2").fadeToggle(1000);
			$(".div3").fadeToggle(1000);
		})
	jQuery fadeTo()方法
	jQuery fadeTo()方法允许渐变为给定得不透明度(值介于0-1之间)
	语法
	$(selector).fadeTo(speed, opacity, callback);
	必需的speed参数规定效果的时长,他可以取下值:"slow", "fast"或者毫秒
	fadeTo()方法中必需的opacity参数将淡入淡出效果设置为给定的不透明度(值介于0-1之间)
	可选的callback参数是该函数完成之后所执行的函数名称
	下面是实例
	
	-->
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
		$(document).ready(function(){
			$("#fadeInBtn").click(function(){
				$(".div1").fadeIn(1000);
				$(".div2").fadeIn(2000);
				$(".div3").fadeIn(3000);
			});
			$("#fadeOutBtn").click(function(){
				$(".div1").fadeOut(3000);
				$(".div2").fadeOut(2000);
				$(".div3").fadeOut(1000);
			});
			$("#fadeToggleBtn").click(function(){
				$(".div1").fadeToggle(1000);
				$(".div2").fadeToggle(1000);
				$(".div3").fadeToggle(1000);
			});
			$("#fadeToBtn").click(function(){
				$(".div1").fadeTo("slow", 0.15);
				$(".div2").fadeTo("slow", 0.4);
				$(".div3").fadeTo("slow", 0.7);
			});
		});
		</script>
		<style>
			.div1{
				width: 80px;
				height: 80px;
				display: none;
				background-color: red;
			}
			.div2{
				width: 80px;
				height: 80px;
				display: none;
				background-color: green;
			}
			.div3{
				width: 80px;
				height: 80px;
				display: none;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<p>一下实例展示了fadeIn()/fadeOut()使用不同参数有不同效果</p>
		<button id="fadeInBtn">点击淡入div元素</button>
		<button id="fadeOutBtn">点击淡出div效果</button>
		<button id="fadeToggleBtn">淡入/淡出</button>
		<button id="fadeToBtn">颜色变淡</button>
		<div class="div1"></div><br>
		<div class="div2"></div><br>
		<div class="div3"></div>
	</body>
</html>
天又热了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery-淡入淡出动画效果
qq_45802159的博客
11-25 212
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
jQuery 实现淡入淡出效果
天空之外
09-12 716
上一节我们学习了如何实现元素的显示与隐藏，本节我们来学习如何实现元素的淡入淡出效果。 fadeIn()方法 fadeIn() 方法用于淡入已隐藏的元素。 语法如下所示： $(selector).fadeIn(speed,callback); speed：规定效果的时长，可选值有 slow、fast 或毫秒。 callback：是 fading 完成后所执行的函数名称。 示例： 例如当我们点击按钮时，将紫色正方形设置为淡入效果： <!DOCTYPE html> <html> &l
jQuery 效果 - 淡入淡出
NanChen的博客
09-02 373
效果附上： 代码如下： <!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">
jQuery-效果-淡入/淡出/淡入淡出切换
m0_73839298的博客
10-17 43
作用:用于在指定的时长内将元素的渐变不透明度从一个值变化到另一个值，值的范围是0～1，可小数点后两位。作用:用于淡入被选元素，注意！作用:用于淡出被选元素，注意！作用:用于被选元素的淡入淡出切换。
Javascript-- jQuery动画篇(淡入淡出效果)
weixin_34409357的博客
04-15 89
淡入淡出效果 jQuery 提供了下面几种方法可以实现显示的淡入淡出效果： fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn()方法 fadeIn()实现淡入效果，其基本语法如下： $(selector).fadeIn(speed,callback); 可选参数 speed 给出了淡入效果的时间，可以使用 “slow”...
JQuery效果-淡入淡出和滑动
qq_24917475的博客
06-17 301
1、 toggle(); 用来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素。 语法：$(selector).toggle(speed, callback); speed：规定隐藏和显示的速度；callback：toggle执行完成之后回调的函数名称。 2、$(selector).fadeIn(speed, callback); 用来淡入已隐藏的元素。 3、$...
10008---jQuery效果--淡入淡出
xxxcyzyy的博客
12-04 323
 jQuery Fading 方法 通过 jQuery，您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法： fadeIn()fadeOut()fadeToggle()fadeTo() jQuery fadeIn() 方法  jQuery fadeIn() 用于淡入已隐藏的元素。 语法： $(selector).fadeIn(speed,callback
jQuery之动画的淡入淡出效果
weixin_44540178的博客
02-23 2249
开发工具与关键技术：DW ,Visual Studio ,jQuery 作者：李明润 撰写时间：2019年2月2日 既然JavaScript脚本语言中有可以实现动画效果，那么从其加以封装的jQuery也含有实现动画 效果的功能。 要用jqueryj就要先引用jQuery的文件 我这里用的是下面的这个版本 我们先来学习jQuery的淡入淡出的动画效果。 方法： 1， fadeout—动画淡出效果。...
Jquery------淡入淡出效果
cat marshal的博客
07-13 99
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>淡入淡出</title> <script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></s...
jquery插件tooltipv顶部淡入淡出效果使用示例
10-26
是一个加了点淡入淡出效果的顶部tooltip控件，会自动消失,小功能大家参考使用吧
jQuery实现图片文字淡入淡出效果
01-19
本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果，分享给大家供大家参考，具体内容如下 1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2、实现原理 首先要设定div...
jQuery淡入淡出瀑布流效果.zip
07-11
《jQuery淡入淡出瀑布流效果的实现与应用》 在网页设计中，动态效果的运用可以极大地提升用户体验，使得网站或应用更具吸引力。其中，jQuery的淡入淡出瀑布流效果是一种常见的视觉表现手法，它结合了瀑布流布局的...
jquery淡入淡出效果简单实例
10-22
主要介绍了jquery淡入淡出效果简单实现方法,以完整实例形式分析了jQuery中fadeIn及fadeOut实现淡入淡出的相关技巧,需要的朋友可以参考下
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 895
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 222
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 288
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【Vue3】自定义组件
又言又语
07-30 439
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
RN高级interview
最新发布
流星雨的博客
07-31 480
RN高级interview
jquery实现拼图轮播淡入淡出
12-06
根据提供的引用内容，没有明确说明“拼图轮播淡入淡出”的具体实现方式。以下是一种基于jQuery的图片轮播淡入淡出的实现方式，供参考： ```html <!-- HTML结构 --> <div class="slider"> <img src="image1.jpg" alt="image1"> <img src="image2.jpg" alt="image2"> <img src="image3.jpg" alt="image3"> </div> ``` ```css /* CSS样式 */ .slider { position: relative; width: 600px; height: 400px; } .slider img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slider img.active { opacity: 1; } ``` ```javascript // JavaScript代码 $(function() { var $slider = $('.slider'); var $slides = $slider.find('img'); var currentSlide = 0; var slideInterval = setInterval(nextSlide, 3000); function nextSlide() { $slides.eq(currentSlide).removeClass('active'); currentSlide = (currentSlide + 1) % $slides.length; $slides.eq(currentSlide).addClass('active'); } }); ``` 上述代码实现了一个基本的图片轮播淡入淡出效果。具体实现方式是通过CSS的opacity属性控制图片的透明度，然后通过JavaScript代码控制图片的切换。在JavaScript代码中，我们使用了setInterval函数来定时切换图片，使用了eq函数来获取当前图片和下一张图片的jQuery对象，使用了addClass和removeClass函数来控制图片的显示和隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值