jQuery淡入淡出效果

最新推荐文章于 2024-04-05 13:18:03 发布

全球霸蛮

最新推荐文章于 2024-04-05 13:18:03 发布

阅读量3.8k

点赞数 1

分类专栏： jQuery知识点集锦

本文链接：https://blog.csdn.net/lyb123453/article/details/79743589

版权

jQuery知识点集锦专栏收录该内容

8 篇文章 0 订阅

订阅专栏

  jQuery淡入淡出， 
 fadeIn(), 
 fadeOut(), 
 fadeToggle(), 
 fadeTo(); 

  1、 
 fadeIn():用于淡入已隐藏的元素。 

例如：

<!DOCTYPE html>
<html>
    <head>
	<title>淡入效果展示</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
	<style>
	    #div1{
		width:150px;
		height:150px;
		background:#1b1b1b;
		display:none;
	    }
	    #div2{
		width:150px;
		height:150px;
		background:#6c6b5a;
		display:none;
	    }
	    #div3{
		width:150px;
		height:150px;
		background:#1b9c6a;
		display:none;
	    }
	</style>
    </head>
    <body>
	<div>
	    <p>淡入已隐藏的元素</p>
	    <button type="button">点击显示效果</button>
	    <br><br>
	    <div id="div1"></div><br>
	    <div id="div2"></div><br>
	    <div id="div3"></div><br>
	</div>
    <script>
	$(document).ready(function(){
	    $("button").click(function(){
		$("#div1").fadeIn();
		$("#div2").fadeIn("slow");
		$("#div3").fadeIn(5000);
	    })
	})
    </script>
    </body>
</html>

  点击淡入已隐藏的元素之后，隐藏的界面会依据$(selector).fadeIn(speed,callback);中写的speed时间长短依次有顺序的显示，callback参数是fading完成后所执行的函数名称。 

 
 2、fadeOut(),淡出可见元素。 

  代码如下： 

<!DOCTYPE html>
<html>
    <head>
	<title>淡出可见元素</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
	<style>
	    #div1{
		width:150px;
		height:150px;
		background:#1b5c8d;
	    }
	    #div2{
		width:150px;
		height:150px;
		background:#5b8c4d;
	    }
	    #div3{
		width:150px;
		height:150px;
		background:#1b8c9d;
	    }
	</style>
    </head>
    <body>
	<div>
	    <p>元素淡出可见元素</p>
	    <button type="button">点击淡出可见元素</button><br><br>
	    <div id="div1"></div><br>
	    <div id="div2"></div><br>
	    <div id="div3"></div><br>
	</div>
	<script>
	    $(document).ready(function(){
		$("button").click(function(){
		    $("#div1").fadeOut();
		    $("#div2").fadeOut("slow");
		    $("#div3").fadeOut(3000);
		});
	    });
	</script>
    </body>
</html>

  界面显示：在显示的页面中，当点击“点击淡出可见元素”按钮之后，显示页面则按照fadeOut()的speed进行有顺序的隐藏。 

 
 3、fadeToggle(),元素淡入淡出效果随意切换展示。 

  代码如下： 

<!DOCTYPE html>
<html>
    <head>
	<title>淡入淡出效果切换</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
	<link href="css/content.css" rel="stylesheet" type="text/css">
    </head>
    <body>
	<div>
	    <p>淡入淡出效果进行任意切换</p>
	    <button type="button">点击随意切换淡入淡出</button><br><br>
	    <div id="div1"></div><br>
	    <div id="div2"></div><br>
	    <div id="div3"></div><br>
	</div>
	<script>
	    $(document).ready(function(){
		$("button").click(function(){
		    $("#div1").fadeToggle();
		    $("#div2").fadeToggle("slow");
		    $("#div3").fadeToggle(3000);
		})
	    })
	</script>
    </body>
</html>

 
 fadeToggle()方法可以在fadeIn()与fadeOut()之间进行切换，如果元素已淡出，fadeToggle（）会向元素添加淡入效果；如果元素已淡入，fadeToggle()会向元素添加淡出效果。 

 
 4、fadeTo()允许渐变为给定的不透明度（值介于0和1之间）。 

  语法：$(selector).fadeTo(speed,opacity,callback), 
 callback是该函数完成后所执行的函数。 

  代码如下图所示： 

<!DOCTYPE html>
<html>
    <head>
	<title>使用fadeTo方法，让三个图形变淡</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/content.css" rel="stylesheet" type="text/css">
	<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    </head>
    <body>
	<div>
	    <p>使用fadeTo（）方法改变图形透明度</p>
	    <button type="button">点击按钮使图形透明度变淡</button><br><br>
	    <div id="div1"></div><br>
	    <div id="div2"></div><br>
	    <div id="div3"></div>
	</div>
	<script>
	    $(document).ready(function(){
		$("button").click(function(){
		    $("#div1").fadeTo("slow",0.1);
		    $("#div2").fadeTo("slow",0.6);
		    $("#div3").fadeTo("slow",0.8);
		});
	    });
	</script>
    </body>
</html>