How to make animated menu in jquery

Animation is always the requirment for web designing, Flash is now outdated so we use jquery for animation, this is a simple tutorial of <strong>making animated menu in jquery</strong>.Just copy paste the following code and you are done.

by Nikhil Mangal

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<ul id="menu">
	<li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Samples</a></li>
    <li><a href="#">Our Services</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

CSS

#menu
{
	margin:0px;
	padding:0px;
	list-style:none;
}
#menu li
{
	float:left;
}
#menu li a
{
	display:block;
	height:50px;
	background:#330066;
	color:#fff;
	line-height:50px;
	text-decoration:none;
	padding:0px 20px;
	text-transform:uppercase;
	
}
#menu li a:hover
{
	background:#000;
}

JavaScript

$(document).ready(function(e) {
        $('#menu li a').hover(function(){
				$(this).stop(true,true).animate({"lineHeight":"30px"},150,function(){
						$(this).stop(true,true).animate({"lineHeight":"70px"},150,function(){
								$(this).stop(true,true).animate({"lineHeight":"50px"},150);
							});
					});
			},function(){
					
				});
    });