JQ滑动导航菜单的实现

 1 *{margin: 0;padding: 0;}
 2         body{ font-family:"Microsoft YaHei";}
 3         .container {
 4             width: 1200px;
 5             margin: 30px auto;
 6             position: relative;
 7         }
 8         li {
 9             list-style: none;
10         }
11         .nav-wrapper {
12             background-color: #0191d7;
13             height: 50px;
14         }
15         #nav-list {
16             position: relative;
17             z-index: 1;
18         }
19         #nav-list .nav-item {
20             float:left;
21             height: 50px;
22         }
23         #nav-list li a{
24             display: block;
25             padding: 0 50px;
26             height: 50px;
27             font-size: 16px;
28             line-height: 50px;
29             color: #fff;
30             text-decoration: none;
31         }
32         .animate-block {
33             position: absolute;
34             height: 50px;
35             background-color: #2B6B8A;
36             left: 0;
37             top:0;
38             z-index: 0;
39         }
40         .active {
41             box-shadow: 0 0 2px rgba(0,0,0,.1);
42         }

$(function () {
        var $active = $(".active"); //当前选中的菜单
        var $active_w = $active.innerWidth();
        var $active_l = $active.position().left;
        var $animate_block = $(".animate-block");
 
        //设置滑块初始位置
        $(".animate-block").css({width:$active_w,left:$active_l});
 
        //a事件
        $("#nav-list>li").hover(function () {
            var index = $(this).index();
            var $a_cur = $("#nav-list a").eq(index);//得到当前元素
            var width = $a_cur.innerWidth();
            var left = $a_cur.position().left;
            $(".animate-block").stop().animate({width:width,left:left});
        },function () {
            $(".animate-block").stop().animate({width:$active_w,left:$active_l});
        });
    });