004_淡入淡出效果

最新推荐文章于 2021-12-09 09:15:51 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-12-09 09:15:51 发布

阅读量373

点赞数

分类专栏： jQuery学习文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/aihiao/article/details/109804541

版权

jQuery学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1. jQuery淡入淡出方法

1.1. 通过jQuery, 您可以实现元素的淡入淡出效果。

1.2. jQuery拥有下面四种fade方法: fadeIn()、fadeOut()、fadeToggle()和fadeTo()。

2. fadeIn()方法

2.1. fadeIn()方法使用淡入效果来显示被选元素, 假如该元素是隐藏的。

2.2. 语法:

$(selector).fadeIn(speed,callback);

2.3. 参数

2.4. 如果元素已经显示, 则该效果不产生任何变化, 除非规定callback函数。

2.5. 该效果适用于通过jQuery隐藏的元素, 或在CSS中声明display:none的元素(但不适用于visibility:hidden的元素)。

3. fadeOut()方法

3.1. fadeOut()方法使用淡出效果来隐藏被选元素, 假如该元素是隐藏的。

3.2. 语法:

$(selector).fadeOut(speed,callback);

3.3. 参数

3.4. 如果元素已经隐藏, 则该效果不产生任何变化, 除非规定了callback函数。

4. fadeToggle()方法

4.1. fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。如果元素已淡出, 则fadeToggle()会向元素添加淡入效果。如果元素已淡入, 则fadeToggle()会向元素添加淡出效果。

4.2. 语法:

$(selector).fadeToggle(speed,easing,callback);

4.3. 参数

5. fadeTo()方法

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

5.2. 语法:

$(selector).fadeTo(speed,opacity,callback);

5.3. 参数

6. 例子

6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery淡入淡出效果</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("p").fadeOut('fast'); 
				});
				$('#btn2').click(function(){
					$("p").fadeIn('fast'); 
				});
				$('#btn3').click(function(){
					$("p").fadeToggle('fast'); 
				});
				$('#btn4').click(function(){
					$("p").fadeOut('slow'); 
				});
				$('#btn5').click(function(){
					$("p").fadeIn('slow'); 
				});
				$('#btn6').click(function(){
					$("p").fadeToggle('slow', "swing"); 
				});
				$('#btn7').click(function(){
					$("p").fadeOut('normal'); 
				});
				$('#btn8').click(function(){
					$("p").fadeIn('normal'); 
				});
				$('#btn9').click(function(){
					$("p").fadeToggle('normal', "linear"); 
				});
				$('#btn10').click(function(){
					$("p").fadeOut(2000); 
				});
				$('#btn11').click(function(){
					$("p").fadeIn(2000); 
				});
				$('#btn12').click(function(){
					$("p").fadeToggle(2000, "linear"); 
				});
				$('#btn13').click(function(){
					$("p").fadeTo('fast', 0.5); 
				});
				$('#btn14').click(function(){
					$("p").fadeTo('slow', 0.3); 
				});
				$('#btn15').click(function(){
					$("p").fadeTo('normal', 0.1); 
				});
				$('#btn16').click(function(){
					$("p").fadeTo(2000, 1); 
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">fast淡出段落</button> <button id="btn2">fast淡入段落</button> <button id="btn3">fast淡出/淡入段落</button><br /><br />
		<button id="btn4">slow淡出段落</button> <button id="btn5">slow淡入段落</button> <button id="btn6">slow淡出/淡入段落</button><br /><br />
		<button id="btn7">normal淡出段落</button> <button id="btn8">normal淡入段落</button> <button id="btn9">normal淡出/淡入段落</button><br /><br />
		<button id="btn10">2s淡出段落</button> <button id="btn11">2s淡入段落</button> <button id="btn12">2s淡出/淡入段落</button><br /><br />
		<button id="btn13">fast渐变为给定的不透明度</button> <button id="btn14">slow渐变为给定的不透明度</button> 
		<button id="btn15">normal渐变为给定的不透明度</button> <button id="btn16">2s渐变为给定的不透明度</button>
		<p style="width: 300px; height: 300px; background: red;">jQuery淡出淡入和渐变为给定的不透明度</p>
	</body>
</html>

6.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
004_淡入淡出效果

1. jQuery淡入淡出方法1.1. 通过jQuery, 您可以实现元素的淡入淡出效果。1.2. jQuery拥有下面四种fade方法: fadeIn()、fadeOut()、fadeToggle()和fadeTo()。2. fadeIn()方法2.1. fadeIn()方法使用淡入效果来显示被选元素, 假如该元素是隐藏的。2.2. 语法:$(selector).fadeIn(speed,callback);2.3. 参数2.4. 如果元素已经显示, 则该效果不产生任
复制链接

扫一扫

专栏目录