用jQuery实现的菜单下划线动画效果

前几天在网站看到一个菜单下划线动画效果感觉不错.不过他的效果有缺陷,鼠标快速移动时会导致动画停不下来.

自己拿jQuery写了一个,解决了上面的问题,而且菜单的独立性比较好,不会干扰到页面其他的内容.

借助了jQuery的功效,对各大浏览器的支持也很好~

看演示: http://www.koyoz.com/demo/html/menu/link.html

布局结构:

XML/HTML代码

1. <div id="nav">  
2.         <!-- 菜单 -->  
3.         <ul>  
4.             <li><a href="javascript://">首页</a></li>  
5.             <li><a href="javascript://">日志</a></li>  
6.             <li><a href="javascript://">相册</a></li>  
7.             <li><a href="javascript://">播客</a></li>  
8.             <li><a href="javascript://">互动</a></li>  
9.             <li><a href="javascript://">游戏</a></li>  
10.         </ul>  
11.         <!-- 用于动画的层 -->  
12.         <div id="koyoz"></div>  
13.     </div>  

JS代码: 

JavaScript代码

1. $(function(){   
2.     $("#nav a").mouseover(function() {   
3.         var left = $(this).offset().left - $("#nav").offset().left;   
4.         var fly = $("#koyoz");   
5.         if (fly.is(":animated")) {   
6.             fly.stop();   
7.         }   
8.         fly.animate({   
9.             marginLeft:left   
10.         }, 500);   
11.     })   
12. })  

够简单吧.