jquery淡入淡出效果及突出显示案例

最新推荐文章于 2022-07-22 10:24:24 发布

积沙成塔——

最新推荐文章于 2022-07-22 10:24:24 发布

阅读量895

点赞数 3

分类专栏： jquery基础文章标签： jquery jquery

本文链接：https://blog.csdn.net/qq_45308912/article/details/121463832

版权

jquery基础专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中的fadeToggle和fadeTo方法，用于实现元素的淡入淡出效果。fadeToggle在透明度切换中让元素在可见与不可见间动态变化，而fadeTo则允许精确控制元素的透明度。示例代码展示了如何在鼠标悬停时，使列表项的透明度动态调整，实现视觉焦点突出的效果。通过这些方法，我们可以灵活地控制网页元素的视觉呈现，无需修改其尺寸等其他属性。

摘要由CSDN通过智能技术生成

在这里插入图片描述

fadeToggle方法可以动态地让淡入淡出相互切换

fadeTO方法淡入淡出到指定透明度

在这里插入图片描述
使用fadeTo方法让元素透明度淡入到0时，这个元素还是会保留原有位置的宽和高，只不过是透明度透明了而已

从淡入淡出的变化来看得出以下结论： fadeIn方法和fadeOut方法，它们能动态地改变当前元素的透明度，并不修改其他属性，决定最终显示或者隐藏当前元素。

案例效果：
在这里插入图片描述

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			#container {
				background-color: red;
			}
			ul {
				list-style: none;
			/* 	background-color: red; */
				width: 420px;
				margin: 50px auto;
			}
			ul li {
				float: left;
			}
		</style>
		<script src="js/new_file.js"></script>
	</head>
	<body>
		<div id="container">
			<ul>
				<li>
					<img src="img/project4.jpg">
				</li>
				<li>
						<img src="img/project4.jpg">
				</li>
				<li>
						<img src="img/project4.jpg">
				</li>
				<li>
						<img src="img/project3.jpg">
				</li>
				<li>
						<img src="img/project3.jpg">
				</li>
				<li>
						<img src="img/project3.jpg">
				</li>
			</ul>
		</div>
		<script>
			$(function() {
				//鼠标进入的时候，其他li标签透明度0.5
				//鼠标离开，其他li透明度为1
				$("#container ul>li").hover(function(){
					//谁做动画或效果就在谁的前面加stop方法，这样动画和效果就不会排队
					$(this).siblings().stop().fadeTo(400,0.5);
				} , function(){
					$(this).siblings().stop().fadeTo(400,1);
				})
			})
		</script>
	</body>
</html>