jquery手风琴效果

屡见不鲜的一个jquery效果

效果图:

[插入]

难度不大,代码如下:

html:

			<div id="nav">
				<ul>
					<li>
						<a href="#">导航一</a>
						<span></span>
					</li>
					<li>
						<a href="#">导航二</a>
						<span></span>
					</li>
					<li>
						<a href="#">导航三</a>
						<span></span>
					</li>
					<li>
						<a href="#">导航四</a>
						<span></span>
					</li>
					<li>
						<a href="#">导航五</a>
						<span></span>
					</li>
					<li>
						<a href="#">导航六</a>
						<span></span>
					</li>
					<li>
						<a href="#">导航七</a>
						<span></span>
					</li>
					<li>
						<a href="#">导航八</a>
						<span></span>
					</li>
					<li>
						<a href="#">导航九</a>
						<span></span>
					</li>

				</ul>
			</div>

CSS:

		<style type="text/css">
			*{margin:0px;padding:0px;}
			ul li{list-style:none;}
			#nav ul li a{text-decoration:none;color:#fff;display:block;padding-left:18px;
			z-index:2;position:relative}
			#nav{width:220px;height:100%;
			background:#000;
			position:absolute;top:0;left:0;
			}
			#nav ul li{height:35px;width:100%;
			line-height:35px;border-bottom:1px solid #222;
			border-top:1px solid #222;
			position:relative;overflow:hidden;}
			#nav ul li span{width:100%;height:35px;background:red;
			position:absolute;
			top:0;left:100%;z-index:0;}
		</style>

js:

			<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
			<script type="text/javascript">
				$(function(){
					$("#nav").find("li").hover(function(){
						$(this).find("span").css("background",randomColor()).stop(true,true).animate({left:0},"slow");
					},function(){
						$(this).find("span").css("background",randomColor()).stop(true,true).animate({left:"100%"},"slow");
					});

				});
					function randomColor(){
						var r = Math.floor(Math.random()*256).toString(16);
						var g = Math.floor(Math.random()*256).toString(16);
						var b = Math.floor(Math.random()*256).toString(16);
						if(r.length<2) r = "0"+r;
						if(r.length<2) g = "0"+g;
						if(r.length<2) b = "0"+b;
						return "#"+r+g+b;
					}
			</script>