JQ中的动画效果

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

万万没想到2022

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

阅读量300

点赞数

本文链接：https://blog.csdn.net/w2019424/article/details/96859764

版权

本文介绍了如何使用jQuery（JQ）实现一个简单的动画效果。当点击图片中的‘显示’按钮时，会按照预设的编码展示动画效果。

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

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>

	<!--
		1.导入JQ相关的文件
		2.文档加载完成事件：$(function) :页面初始化的操作：绑定事件，启动页面定时器
		3.确定相关操作的事件
		4.事件触发函数
		5.函数里面再去操作相关的元素
	-->
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script>
		$(function(){
			
			//显示页面图片
			//给按钮绑定事件
			$("#btn1").click(function(){
	//			$("#img1").show();
	//			$("#img1").slideDown();
	//			$("#img1").fadeIn(3000);
				
				$("#img1").animate({width:"800px",opacity:"1"},5000);
//定义了图片显示的宽度和透明度以及显示出来的时间
			});
			//隐藏页面图片
			$("#btn2").click(function(){
				//获得img
	//			$("#img1").hide(10000);
	//			$("#img1").slideUp(500);
	//			$("#img1").fadeOut(3000);

				$("#img1").animate({width:"1000px",opacity:"0.2"},5000);

			});
		});
	</script>
</head>
<body>
	<input type="button" value="显示" id="btn1" /><br />
	<input type="button" value="隐藏" id="btn2" /><br />
	<img src="img/11.jpg" id="img1" width="500px" />
</body>
</html>

运行效果如图：
在这里插入图片描述
当点击图片中的显示按钮时，会如上面编码所编写的一样的效果显示出来。