jQuery实现淡入淡出

最新推荐文章于 2024-07-19 20:47:39 发布

茶卡盐佑星_

最新推荐文章于 2024-07-19 20:47:39 发布

阅读量391

点赞数 11

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/hexadecimal_001/article/details/137649990

版权

淡入淡出可以让我们的网页更加美观，更加丰富，今天来看一下淡入淡出效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery-3.4.1.js"></script>
		<style>
			#one{
				width: 100px;
				height: 100px;
				background-color: lightblue;
				display: none;
				position: absolute;
				top: 50px;
			}
			#two{
				width: 100px;
				height: 100px;
				background-color: hotpink;
				display: none;
				position: absolute;
				top: 150px;
			}
			#three{
				width: 100px;
				height: 100px;
				background-color: yellow;
				display: none;
				position: absolute;
				top: 250px;
			}
		</style>
	</head>
	<body>
		<button id="but1">点击淡入</button>
		<button id="but2">点击淡出</button>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
		<button id="but3" >消失</button>
		<div id="four" style="margin-left: 140px;">拜拜啦~</div>
	</body>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#but1").click(function(){
				$("#one").fadeIn(1000);
				$("#two").fadeIn(1200);
				$("#three").fadeIn(1400);
				$("#one").animate({left:'250px'},1000);
				$("#two").animate({left:'150px'},800);
				$("#three").animate({left:'50px'},700);
			})
		});
		$(document).ready(function(){
			$("#but2").click(function(){
				$("#one").animate({left:'0px'},1000);
				$("#two").animate({left:'0px'},800);
				$("#three").animate({left:'0px'},700);
				$("#three").fadeOut(1000);
				$("#two").fadeOut(3000);
				$("#one").fadeOut(5000);
				
			})
		})
		$(document).ready(function(){
			$("#but3").click(function(){
				$("#four").hide(2000,function(){
					alert("再见了，妈妈我今晚，就要远航")
				})
			})
		})
		
	</script>
</html>