淡入淡出

最新推荐文章于 2024-03-19 18:03:25 发布

慕北丶

最新推荐文章于 2024-03-19 18:03:25 发布

阅读量275

点赞数

分类专栏： JavaScript 前端

本文链接：https://blog.csdn.net/qq_42539533/article/details/88716266

版权

JavaScript 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

前端

54 篇文章 0 订阅

订阅专栏

淡入淡出效果

淡入就是让元素按照指定的时间出现（显示），淡出就是让元素按照指定的时间隐藏

实现淡入的方法：fadeIn(时间,函数)
实现淡出的方法：fadeOut(时间,函数)

第二个参数就是一个函数，当元素淡入或者淡出完毕后会自动触发

<!--导入JQuery的js文件-->
		<script src="../js/juery.min.js"></script>
		<script>
			$(function(){
				$("button:eq(0)").click(function(){
					$("div").fadeIn(2000,function(){
						alert("div淡入完毕");
					})
				})
				$("button:eq(1)").click(function(event){
					$("div").fadeOut(2000,function(){
						alert("div淡出完毕");
					})
				})
			})
		</script>
		<style>
			div{
				height: 200px;
				width: 500px;
				background-color: pink;
				margin-top: 100px;
				margin-bottom: 0;
				margin-left: auto;
				margin-right: auto;
				display: none;
			}
		</style>
	</head>
	<body>
		<button type="button">淡入</button>
		<button type="button">淡出</button>
		<div></div>
	</body>