005-jQuery效果-淡入淡出

最新推荐文章于 2023-12-14 19:51:15 发布

天又热了

最新推荐文章于 2023-12-14 19:51:15 发布

阅读量379

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_43404791/article/details/122614655

版权

jQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!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
评论
005-jQuery效果-淡入淡出

<!DOCTYPE html><html> <!--jQuery效果-淡入淡出 jQuery Fading方法通过jQuery,您可以实现元素的淡入淡出效果 jQuery拥有下面四种fade方法: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn()方法 jQuery fadeIn()用于淡入已隐藏的元素语法 $(selector).fadeIn(speed, callb
复制链接

扫一扫

专栏目录