jQuery会弹钢琴的菜单导航

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

分类：导航菜单 > 滑动导航难易：入门级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

导航菜单html代码：

<ul id="nav">
    <li><a href="http://www.sucaihuo.com">首页</a></li>
    <li><a href="http://www.sucaihuo.com/js">jQuery特效</a></li>
    <li><a href="http://www.sucaihuo.com/php">PHP</a></li>
    <li><a href="http://www.sucaihuo.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);
            }
    );
});