Jquery box random teleport

<html>
	<head>
		<style>
			.bound{
				width:800px;
				height:600px;
				margin-left:20%;
				border:1px solid black;
				position:relative;
			}
			.box{
				width:100px;
				height:100px;
				position:absolute;
				background:green;
				left:350px;
				top:250px;
			}
		</style>
		<script src="jquery.js"></script>
		<script>
			var x=350;
			var y=250;
			$(document).ready(function(){
				boxFadeOut();
			});
			function boxFadeIn(){
				$(".box").fadeIn(1000,boxFadeOut);
			}

			function boxFadeOut(){
				$(".box").fadeOut(1000,changePos);
			}

			function changePos(){
				x = Math.round(Math.random()*700);
				y = Math.round(Math.random()*500);
				//$(".box").css("margin-left",x);
				//$(".box").css("margin-top",y);
				$(".box").animate({left:x,top:y},0);
				boxFadeIn();
			}
		</script>
	</head>
	<body>
		<div class="bound">
			<div class="box">
			</div>
		</div>
	</body>
</html>