使用jQuery实现动画效果

最新推荐文章于 2024-04-16 15:12:02 发布

Modify_QmQ

最新推荐文章于 2024-04-16 15:12:02 发布

阅读量775

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/qq_44973159/article/details/103936525

版权

看一下效果图：当鼠标放在绿色小块上，将会放大，鼠标移开后，又会缩小为初始大小。
在这里插入图片描述
代码如下：

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
		</script>
		<SCRIPT>
			$(document).ready(function() {
				$("div").mouseenter(function() {
					$("div").animate({
						center: '250px',
						opacity: '0.5',
						height: '250px',
						width: '250px'
					});
				});
				$("div").mouseleave(function() {
					$("div").animate({
						opacity: '1',
						height: '100px',
						width: '100px'
					});
				});

			});
		</SCRIPT>
	</HEAD>

	<BODY>

		<DIV style="background:#98bf21;height:100px;width:100px;position:absolute;">
		</DIV>
	</BODY>

</HTML>