animate jquery

<html>
	<head>
		<style>
			.button{
				border:1px solid black;
				text-align:center;
				position:absolute;
				left:500px;
				top:400px;
				width:100px;
				height:100px;
			}
			.box{
				position:absolute;
				left:100px;
				top:100px;
				width:250px;
				height:250px;
				border:1px solid black;
				-webkit-transform:rotate(45deg);
			}
		</style>
		<script src="jquery.js"></script>
		<script>
			var x=100;
			var y=100;
			$(document).ready(function(){
				$(".button").click(function(){
					y+=50;
					$(".box").animate({top:y},1000);
				});

				$(".button").hover(function(){
					$(".button").animate({background:"yellow",width:"150px",height:"150px",left:"475px",top:"375px"},1000);
				});

				$(".button").mouseout(function(){
					$(".button").animate({background:"white",width:"100px",height:"100px",left:"500px",top:"400px"},1000);
				});

				$(".box").click(function(){
					x=100;
					y=100;
					$(".box").animate({left:x,top:y},1000);
				});
			});
		</script>
	</head>
	<body>
		<div class="button">
			Click Me
		</div>
		<div class="box">
		</div>
	</body>
</html>