jQuery学习之animate的应用

    今天看到别人导航有个特效就是鼠标进过导航的时候，底部有个边框从0开始缓动增加，于是就想到了jQuery的animate命令，自己也动手搞了一把，刚开始是想把border写在a标签上，给个0使用animate让他增加，播过这个实现的并不是我们要的想过，他变成高度上的增加了，于是我就分离开，吧border写在了i标签该标签的初始是width为0，然后通过animate指定，经过的时候width开始增加。。

    于是我的html代码如下：

		<div class="menu clearfix">
			<ul>
				<li>
					<a href="#">Home</a>
					<i></i>
				</li>
				<li>
					<a href="#">About</a>
					<i></i>
				</li>
				<li>
					<a href="#">Product</a>
					<i></i>
				</li>
				<li>
					<a href="#">News</a>
					<i></i>
				</li>
				<li>
					<a href="#">Contact</a>
					<i></i>
				</li>
			</ul>
		</div>

然后调整下菜单表现【css部分】：

	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	.clearfix{*zoom:1;}	
 	
 	.menu{ width: 100%; height: 50px; border-top: solid 1px #e9e9e9; background-color: #f6f6f6;}
 	.menu ul{ width: 1200px; height: 40px; line-height: 40px; margin: 5px auto;}
 	.menu ul li{ float: left;}
 	.menu ul li a{ display: block; width: 100px; height: 40px; font:normal 14px/40px "Microsoft YaHei"; text-align: left; text-indent: 10px;}
 	.menu ul li i{ display: block; width: 0px; height: 0px; line-height: 0; border-bottom: solid 2px #cbcbcb; margin-top: -2px; }

接着是jq部分：

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<!--<script src="jquery-1.8.2.min.js/jquery-1.8.2.min.js"></script>-->
	
	<script language="javascript">
		$(document).ready(function(){
								 

			$(".menu ul li a").hover(function(){
				$(this).next("i").animate({width:"100px"});
			}, function(){
				$(this).next("i").animate({width:"0px"});
			})
		 
								 
		});

	</script>

最终界面如下：

完整代码：http://download.csdn.net/detail/eadio/8228813