アニメーションするロールオーバー

jQuery JavaScript 
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
<style type="text/css">
ul {
    list-style: none;
}
#container {
	margin:20px;
}
ul#menu {
	z-index: 0;
}
ul#menu li {
	margin:0 0 10px 0;
	width:200px;
	height:20px;
	background:#80aba9;
}
ul#menu li a {
	display:block;
	background:url("images/menubg.jpg") -200px 0 no-repeat;
	height:20px;
	z-index: 1;
}
</style>
<script type="text/javascript">
//<![CDATA[
	$(document).ready(function(){
		$("#menu li a").bind("mouseover", mouseOverFunc);
		$("#menu li a").bind("mouseout", mouseOutFunc);
		
		function mouseOverFunc(){
			$(this).stop().animate(
				{backgroundPosition:"(0 0)"},
				{duration: "slow", easing: "easeOutExpo", complete: function(){}}
			);
		}
		
		function mouseOutFunc(){
			$(this).stop().animate(
				{backgroundPosition:"(-200px 0)"},
				{duration: "slow", easing: "easeOutExpo", complete: function(){}}
			);
		}
	});
//]]>
</script>
</head>
<body>
<div id="container">
<ul id="menu">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
</ul>
</div>
</body>
</html>