以前できなかったoffset

以前できなかったoffsetができたっていう

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
</head>
<body>
<div class="box jump"></div>
<p></p>

<style>
body{margin: 0;padding: 0;}
.box{
	width: 50px;
	height: 50px;
	background: #000;
	position: absolute;
	left: 20px;
	margin-left: 0px;
}

@-webkit-keyframes jump{
	0%{top: 200px;}
	100%{top: 50px;}	
}

.jump{
	-webkit-animation: jump linear 0.8s;
    -webkit-transform-origin: center -20px 0;
    -webkit-animation-iteration-count: infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state: running;
}

.swing{
		-webkit-animation-play-state: running;
		-webkit-animation: swing linear 0.8s;
        -webkit-transform-origin: center -20px 0;
}

@-webkit-keyframes swing{
    0% { margin-left: 5px; }
    25% { margin-left: -5px; }
    50% { margin-left: 10px; }
    75% { margin-left: -10px; }
    100% { margin-left: 0px; }
}


</style>
<script>


	$(".box").mouseover(function(e){
		$("p").html(($(this).offset().top));
		});

	$(".box").hover(function(e){
		$(this).css({"top":($(this).offset().top)}),
		$(this).addClass("swing");
		},
		function(){
			$(this).removeClass("swing"),
			$(this).addClass("jump");
		}
		);

</script>

</body>
</html>