メニューをストライプにしてマウスホバーでテキストがアニメーション

Result

jQuery

$(document).ready(function() {
     
        //ストライプを作成
        $('ul#menu li:even').addClass('even');
         
        //マウスホバーイベント
        $('ul#menu li a').mouseover(function() {
         //アニメーションでpaddingを与えたり外したり
            $(this).animate({paddingLeft:"25px"},{queue:false,duration:200});
        }).mouseout(function(){
            $(this).animate({paddingLeft:"0"},{queue:true,duration:300});
        }).click(function(){
            $(this).animate({fontSize:"25px"},{queue:false,duration:200});
        });     
    });

css

ul#menu {
    margin:0;
    padding:0;
    width:180px;
    border:1px solid #ddd;
    list-style:none;    
    background-color:#eee;
}
 
ul#menu li {
    margin:0;
    padding:5px 0 5px 20px;
    border-bottom:1px solid #ddd;    
    font-family:arial;
    font-size:15px;
    font-weight:700;
    color:#F6EFDC;
}
 
ul#menu li:first-child {
    border-top:none
}
 

ul#menu li a {
    color:#F6EFDC;
    text-decoration:none;   
    padding-right:100px;
    white-space:nowrap;
}
 
ul#menu li a {
    color:#666;
    text-decoration:none;
}
 
.even {
    background-color:#666;
    
}
ul#menu li.even a{
color:#eee;
}
 
*html ul#menu li a {
    padding-right:60px !important
}

html

<ul id="menu">
    <li><a href="javascript:void(0);">List01</a></li>
    <li><a href="javascript:void(0);">List02</a></li>
    <li><a href="javascript:void(0);">List03</a></li>
    <li><a href="javascript:void(0);">List04</a></li>
    <li><a href="javascript:void(0);">List05</a></li>
    <li><a href="javascript:void(0);">List06</a></li>
   </ul>

via

Navigation List menu + jQuery Animate Effect Tutorial | Queness