下面这个小例子，灵感来源于百度有啊的应用(现在好像没有了)，就是当鼠标移上去和移除，图标会有缓动的效果。效果不比flash的差。

51CTO推荐专题：jQuery从入门到精通  jQuery给力插件大阅兵

下面是的效果图：图标很好设计，在这里就不教大家怎么设计了。

下面是JQ的代码部分：

$(function(){   
      //append img to LI   
      $("#nav-shadow li").append('
width="60" height="32"  alt="" />');//这是阴影的图片   
      //append hover event   
      $("#nav-shadow li").hover(function(){   
     //define e for tihs   
          var $e = this;   
         $($e).find("a").stop().animate({marginTop:'-14px'},250,function(){//回调函数控制   
              $($e).find("a").animate({marginTop:'-10px'},250);  
              
         });  
         $($e).find("img.shadow").stop().animate({width:"80%",opacity:"0.3",marginLeft:"8px"},250);                  
           
     },function(){  
         var $e = this;  
         $($e).find("a").stop().animate({marginTop:"4px"},250,function(){  
             $($e).find("a").animate({marginTop:"0px"},250);  
         });      
         $($e).find("img.shadow").stop().animate({width:"100%",opacity:"1",marginLeft:"0px"},250);              
        }  
        )  
     }) 

分析：

首先增加倒影：

$("#nav-shadow li").append('
width="60" height="32"  alt="" />') 

然后注册，hover事件，用回调函数控制弹回去时候的效果。阴影的距离感是通过透明度控制的。

下面是HTML代码：

   
     
        
            
            
            
            
            
             *{ margin:0; padding:0;}  
             div{ width:500px; height:500px; margin:100px 0 auto;}  
             ul,ol{ list-style:none; list-style-type:none;}  
             a,a:visited,a:hover{ display:block; text-decoration:none; color:#ccc; text-indent:-9999px; 
outline: 0 none; width:61px; height:60px; z-index:2; overflow:hidden;  position:relative;}  
             li{ float:left; width:61px; height:92px; margin-left:10px; position:relative;}      
             #nav-shadow li.chang-one a{ background:url(images/button_pic.jpg) no-repeat left top;}  
             #nav-shadow li.chang-two a{background:url(images/button_pic.jpg) no-repeat -60px top;}  
             #nav-shadow li.chang-three a{background:url(images/button_pic.jpg) no-repeat -120px top;}  
             #nav-shadow li.chang-four a{background:url(images/button_pic.jpg) no-repeat -180px top;}  
             #nav-shadow li.chang-five a{background:url(images/button_pic.jpg) no-repeat -240px top;}  
             #nav-shadow li img.shadow{margin:0 auto; position:absolute; bottom:0px; left:0px; z-index:1;}  
           
       
       
        
            
              click me
  
             click me
  
             click me
  
             click me
  
             click me