hover带有动画效果的导航

html,body{overflow-x:hidden;}
        ul,li{list-style: none;}
        .nav{width:100%; height: 26px; overflow: hidden;}
        .nav li{width: 100px; text-align: center; height: 26px; line-height: 26px; float: left; position: relative;}
        .nav li a{text-decoration: none; color: #333;}
        .nav li .bg{background: #168EED; position: absolute; top:0; left:0; width: 100%; height: 100%; z-index:-1; filter:alpha(opacity=0); opacity:0;}

<ul class="nav">
    <li><div class="bg"></div><a href="javaScript:;">li 1</a></li>
    <li><div class="bg"></div><a href="javaScript:;">li 1</a></li>
    <li><div class="bg"></div><a href="javaScript:;">li 1</a></li>
</ul>

$(function () {
        var $lis = $(".nav li");
        var $lisBg = $(".nav .bg");
        $lis.hover(function () {
            var $index = $(this).index();
            $lisBg.eq($index).animate({"opacity": 1}, 200);
        }, function () {
            var $index = $(this).index();
            $lisBg.eq($index).animate({"opacity": 0}, 300);
        })
    })