1.4 JQ的动画效果

最新推荐文章于 2021-11-09 21:54:26 发布

原创最新推荐文章于 2021-11-09 21:54:26 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

19 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<input type="button" value="显示" id="btn1"/>
	<input type="button" value="隐藏" id="btn2"/>
	<img src="../../图库/1.png" id="img1"/>
	
	<script type="text/javascript" src="../../js库/jquery-2.1.0.js"></script>
	<script>
	//这里只有最基础的hide()和show()两个,更多可参考手册
		$(function(){
			$("#btn1").click(function(){
				$("#img1").show(1000);
				//show()里面可以有三个参数,slow,normal,fast,表示动画执行时间
				//也可填时间
			});
		});
		
		$(function(){
			$("#btn2").click(function(){
				$("#img1").hide("fast");
				//hide()里面可以有三个参数,slow,normal,fast,表示动画执行时间
				//也可填时间
			});
		});			
	</script>
</body>
</html>