jquery 动画实现阴影效果

最新推荐文章于 2021-03-19 20:30:14 发布

原创最新推荐文章于 2021-03-19 20:30:14 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个使用jQuery库实现的简单动画效果：当鼠标悬停在特定元素上时，一个隐藏的红色矩形将逐渐显示并扩展到300像素宽度，当鼠标离开时，该矩形会缓慢收缩消失。此效果通过监听mouseenter和mouseleave事件，并结合animate方法完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script>
			$(document).ready(
		function(){
			$(".one").mouseenter(function(){$(".two").animate({
				width:'300px'
			},"slow");}).mouseleave(function(){$(".two").animate({
				width:'0'
			},"slow");});			
		}
		);
		</script>
		<style type="text/css">
			.two {
				width: 0;
				height: 100px;
				background-color: red;
				position: absolute;
				z-index: 1;
				opacity: 0.3;
			}

			.one {
				opacity: 0.3;
				width: 300px;
				height: 100px;
				position: absolute;
				z-index: 2;
				word-wrap: break-word;
				cursor:pointer;
			}
		</style>
	</head>
	<body>
		<div class="one">你好啊！你好啊！你好啊！你好啊！你好啊！你好啊！你好啊！你好啊！你好啊！你好啊！你好啊！你好啊！你好啊！你好啊！你好啊！</div>
		<div class="two"></div>
	</body>
</html>