jquery滑动菜单

<div class="menu">
		<ul>
			<li name="0">首页</li>
			<li name="1">php中文网</li>
			<li name="2">西门大官人</li>
			<li name="3">独孤九剑</li>
			<li name="4">灭绝师太</li>
		</ul>
		<div class="block"></div>
	</div>

*{margin:0;padding: 0;}
		.menu{height: 32px;background: orange;width: 500px;margin:10px auto;border-radius: 6px;box-shadow: 0 0 8px #000;position: relative;}
		li{width: 100px;height: 30px;line-height: 30px;text-align: center;color: #FFF;float: left;list-style: none;cursor: pointer;}
		.block{width: 100px;height: 2px;background: #FFF;border-radius: 2px;position: absolute;left:0;top:30px;}

$(function(){
			$('li').hover(function(){
				$x = parseInt($(this).attr('name'))*100;
				$('.block').stop().animate({
					left:$x+'px'
				},300);
			},function(){
				$('.block').stop().animate({
					left:'0px'
				},300);
			});
		})