首页>>导航菜单>>jQuery动画图标菜单导航 鼠标经过显示图标，图标在文字下方(2014-08-03)

jQuery动画图标菜单导航 鼠标经过显示图标，图标在文字下方

jQuery动画图标菜单导航 鼠标经过显示图标，图标在文字下方
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="navigation">  
  2.   <ul class="menu" id="menu">  
  3.     <li><span class="ipod"></span><a href="" class="first">Players</a></li>  
  4.     <li><span class="video_camera"></span><a href="">Cameras</a></li>  
  5.     <li><span class="television"></span><a href="">TVs</a></li>  
  6.     <li><span class="monitor"></span><a href="">Screens</a></li>  
  7.   
  8.     <li><span class="print"></span><a href="" class="last">Printers</a></li>  
  9.   </ul>  
  10. </div>  

 

 
JavaScript Code
  1. <script type="text/javascript">  
  2.             $(function() {  
  3.                 var d=1000;  
  4.                 $('#menu span').each(function(){  
  5.                     $(this).stop().animate({  
  6.                         'top':'-17px'  
  7.                     },d+=250);  
  8.                 });  
  9.   
  10.                 $('#menu > li').hover(  
  11.                 function () {  
  12.                     var $this = $(this);  
  13.                     $('a',$this).addClass('hover');  
  14.                     $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});  
  15.                 },  
  16.                 function () {  
  17.                     var $this = $(this);  
  18.                     $('a',$this).removeClass('hover');  
  19.                     $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});  
  20.                 }  
  21.             );  
  22.             });  
  23.         </script>  

原文地址:http://www.freejs.net/article_daohangcaidan_395.html