代码改变世界

简单的动画

2011-07-18 15:27  Rollen Holt  阅读(455)  评论(0)  编辑  收藏  举报 
<!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>

		<title>hello</title>

		<meta http-equiv="Content"  "content=text/html; charset=utf-8" />
		<script type="text/javascript"

		src="jquery-1.5.0-vsdoc.js"></script>

		<script type="text/javascript"

		src="jquery-1.4.2.js"></script>

		<style type="text/css">
			.divFrame {
				border:solid 1px #ccc;
				background-color:#eee;
				width:60px;
				height:60px;
				font-size:13px;
				padding:5px
			}
		</style>

		<script type="text/javascript">
			$( function() {
				$(".divFrame").click( function() {
					$(this).animate({
						width:"20%",
						height:"70px"
					},3000, function() {
						$(this).html("变大了");
					})
				}
				)
			})
		</script>
	</head>
	<body>
		<div class="divFrame">
			点击变大
		</div>

	</body>

</html>