jq背景动画般滑动效果网站导航条

div+css+jq鼠标靠近导航背景动画般滑动导航条特效，鼠标移动到导航条对应栏目名称背景快速从其它栏目名称滑动到对应鼠标选择的名称栏目，如动画般滑动效果特效。

css动画般滑动导航条特效效果截图

 特点此css div jq特效可用于企业个人等网站导航，背景滑动效果平滑漂亮，如水动般效果。

关键HTML代码：

<div class="nav"> 
    <div id="navSelected" class="navSelected"></div> 
    <ul id="navBd" class="clearfix"> 
      <li id="navCurr" class="navHover">
<a href="//www.html8.com.cn/">HTML8</a></li>                     
        <li><a href="#">网站建设</a></li> 
        <li><a href="#">网站维护</a></li> 
        <li><a href="#">网站改版</a></li> 
        <li><a href="#">网站优化</a></li> 
        <li><a href="#">成功案例</a></li> 
        <li><a href="#">常见问题</a></li> 
    </ul> 
</div> 

对应CSS代码：

.clearfix:after{visibility: hidden; display: block; clear: both; 
height: 0; font-size: 0; content: ".";} 
.clearfix{zoom:1;} 
 
.nav {position:relative;width:700px;height:38px;overflow:hidden;
line-height:38px;font-size:14px;margin:40px auto 0 auto;} 
.nav li{float:left;display:inline;width:100px;height:39px; 
line-height:34px;text-align:center;} 
.nav a:hover{text-decoration:none;} 
#navBd{position:relative;} 
.navHover a{display:inline-block;color:#fff;} 
#navSelected{position:absolute;top:0;width:100px;height:39px; 
ine-height:33px;background:url(images/header.png) no-repeat  0 0;} 

JQ新写JS代码：

<script type="text/javascript"> 
$(function(){ 
 
    //擦除效果 
    jQuery.extend(jQuery.easing, 
        { 
            easeOutBack: function (x, t, b, c, d, s) { 
                ss = s || 1.3; 
                return c*((tt=t/d-1)*t*((s+1)*t + s) + 1) + b; 
        } 
    }); 
     
    //nav初始化选中 
    var navCurr = $("#navCurr"); 
    $("#navSelected").css("left", navCurr[0].offsetLeft); 
     
    //nav里的链接hover效果 
    $("#navBd li").hover(function(){ 
            if(!!$("#navSelected").stop(true).animate({left:$(this)[0].offsetLeft}, 400, "easeOutBack")) { 
                $(this).siblings().removeClass("navHover").end().addClass("navHover"); 
                $(this).find("a").hide().fadeIn(300); 
            } 
             
        }, function(){ 
            $(this).removeClass("navHover"); 
            $("#navCurr").addClass("navHover"); 
            //window.setTimeout(function(){$("#navCurr").parent().addClass("navHover")},100); 
            $("#navSelected").stop(true).animate({left:navCurr[0].offsetLeft}, 300, "easeOutBack"); 
        } 
    ); 
 
}) 
</script> 

当然以上代码包括JQ文件、图片素材、HTML文件、CSS文件等都将给完整打包后供大家下载。

在线演示

查看案例

打包下载

以上供大家免费浏览演示与免费下载，jq css导航条背景滑动动画般效果特效篇。