前几天在网站看到一个菜单下划线动画效果感觉不错.不过他的效果有缺陷,鼠标快速移动时会导致动画停不下来.
自己拿jQuery写了一个,解决了上面的问题,而且菜单的独立性比较好,不会干扰到页面其他的内容.
借助了jQuery的功效,对各大浏览器的支持也很好~

布局结构:
<div id="nav">  
        <!-- 菜单 -->  
        <ul>  
            <li><a href="javascript://">首页</a></li>  
            <li><a href="javascript://">日志</a></li>  
            <li><a href="javascript://">相册</a></li>  
            <li><a href="javascript://">播客</a></li>  
            <li><a href="javascript://">互动</a></li>  
            <li><a href="javascript://">游戏</a></li>  
        </ul>  
        <!-- 用于动画的层 -->  
        <div id="koyoz"></div>  
    </div>

JS代码: 
$(function(){   
    $("#nav a").mouseover(function() {   
        var left = $(this).offset().left - $("#nav").offset().left;   
        var fly = $("#koyoz");   
        if (fly.is(":animated")) {   
            fly.stop();   
        }   
        fly.animate({   
            marginLeft:left   
        }, 500);   
    })   
})