jQuery会弹钢琴的菜单导航

会前端的都知道animate不支持backgroundPosition，因此今天结合菜单导航介绍一款支持定义背景图片位置的插件：animate-bg.js

淘建站为您提供更多_导航菜单_滑动导航_导航菜单，在此特别感谢您对我们的支持与厚爱！

HTML

导航菜单html代码：

<ul id="nav">
    <li><a href="http://www.sucaiq.com">首页</a></li>
    <li><a href="http://www.sucaiq.com/js">jQuery特效</a></li>
    <li><a href="http://www.sucaiq.com/php">PHP</a></li>
    <li><a href="http://www.sucaiq.com/templates">网站模板</a></li>
</ul>

引入jquery插件和animate背景图片插件animate-bg.js

<script src="js/jquery.min.js" type="text/javascript"></script> 
<script src="js/animate-bg.js" type="text/javascript"></script>

jQuery

导航菜单a标签悬浮和离开触发事件

$(function() {
    $("ul#nav li a").addClass("js");
    $("ul#nav li a").hover(
            function() {
                $(this).stop(true, true).animate({backgroundPosition: "(0 0)"}, 200);
                $(this).animate({backgroundPosition: "(0 -5px)"}, 150);
            },
            function() {
                $(this).animate({backgroundPosition: "(0 -149px)"}, 200);
            }
    );
});