基于jQuery的滑动式动画导航栏

发表于 5年以前 | 总阅读数：1271 次

在欣赏一些Flash动画网站的时候，发现了很多不错的动画效果，本博虽然并不执迷于动画效果，但是一些不错的滑动的导航栏效果还是挺不错的。今天刚好碰到一个这样的项目，我觉得如果用这种滑动效果的话肯定很不错。折腾了半天，碰上了几个问题，看来自己还得努力学习。在这里我把这个效果分享给大家，如果有更好的解决办法，可以留言告诉我。

how can i get my ex girlfriend back

先看看实际效果的演示

基于jQuery的滑动式动画导航栏

查看演示

HTML结构部分：





      * HOME首页


      * ABOUT我们


      * SERVICES服务


      * WORK工作


      * CLIENT客户


      * CONTACT联系

一个简单的无序列表，但是在a标签的前面添加了span标签，span标签在默认状态下是隐藏的，当鼠标在a标签悬停的时候，span标签将会以滑动的方式显示出来,这样就有了简单的动画效果。好了，再来看看CSS该怎么写。

CSS样式表部分：


    #nav {
      width:432px;
      margin:49px auto 0; /*让元素在页面居中*/
    }
    #nav li {
      width:68px;
      height:88px;
      float:left;
      margin:0 2px;
      position:relative; /*li标签相对定位*/
      text-align:center;
      z-index:5;
      display:inline;
    }
    #nav li span {
      color:#fff;
      width:68px;
      background:url(nav_bg.png) no-repeat 0 0;/*滑动背景添加到span标签中*/
      position:absolute; /*span标签绝对定位*/
      top:0; left:0;
      z-index:10;/*span标签要在a标签的下面，所以层叠顺序要小于a标签的层叠顺序*/
      font-size:11px;
      height:58px;
      padding-top:30px;
      display:none;/*在默认状态下span标签是隐藏的*/
    }
    #nav li a {
      color:#202020;
      font-size:14px;
      letter-spacing:0.5px;
      width:68px;
      display:block;
      position:absolute;/*a标签也同样需要绝对定位*/
      top:0; left:0;
      z-index:20;/*但是a标签的层叠顺序应该是大于span标签的，这样才能确保a标签不被span标签遮盖住*/
      height:35px;
      padding-top:55px;
      text-decoration:none;
    }

看到这里，想必基本的原理大家都会明白了，蓝色的背景是加在span标签中的，并且默认状态下是隐藏的，当鼠标悬停在a标签上面时，span标签就会以滑动的方式显示出来并且a标签要在span标签的上面，span标签和a标签都设置绝对定位就是要确保a标签中的内容始终不会被span标签给遮盖住。

jQuery动画部分：

第一步当然是引入jQuery的库文件：

从google的服务器引入jQuery的库文件之后，就可以开始写jQuery代码了：


    $(function(){
      $('#nav li').children('a').hover(function(){ //查找li标签中的a标签并且为a标签绑定一个鼠标悬停的事件
    //当鼠标悬停的时候查找a标签的同辈span标签，并给span标签添加一个滑下来的效果（显示）
      $(this).siblings('span').slideDown(100);
      $(this).css({'color':'#fff'}); //当span标签滑下来后a标签更改字体的颜色为白色
    },function(){
    //当鼠标离开的时候查找a标签的同辈span标签，并给span标签添加一个滑上去的效果（隐藏）
      $(this).siblings('span').slideUp(100);
      $(this).css({'color':'#202020'}); //当span标签滑上去后a标签更改字体的颜色为黑色
      });
    });

到这一步，效果基本上是出来了，但是经过实际效果的检测发现有个问题，就是a标签更改颜色和span标签滑下来的时间总是不会同步，因为滑动效果会有个延时，而a标签更改字体颜色没有延时，这就造成了时间的不同步，导致这个效果并不是很理想。这个时候就需要用到JavaScript的setTimeout方法了。

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，起到了一个延时的作用，当然也可以通过创建一个函数循环重复调用setTimeout，以实现重复的操作。


      var changeColor = this;  //获取a标签后并赋值给变量changeColor
      this.timer = setTimeout(function(){
        $(changeColor).css({'color':'#fff'});
        },100);//100毫秒后执行改变CSS样式的函数

使用了setTimeout()方法后，需要对setTimeout进行清除，不然会产生一些延时的副作用：如果动作过快的时候，会出现字体颜色改变不了的情况，这是因为没有清除setTimeout()的方法。

  if(this.timer) clearTimeout(this.timer); //清除setTimeout()

好了，使用了setTimeout()方法就可以和滑动的延迟时间同步了，这样整个滑动式的动画导航栏的效果就完美了。完整的jQuery代码如下：


    $(function(){
      $('#nav li').children('a').hover(function(){
      $(this).siblings('span').slideDown(100);
      var changeColor = this;
      this.timer = setTimeout(function(){
        $(changeColor).css({'color':'#fff'});
        },100);
    },function(){
      if(this.timer) clearTimeout(this.timer);
      $(this).siblings('span').slideUp(100);
      $(this).css({'color':'#202020'});
      });
    });

到这一步，整个滑动式的动画栏就完成了，如果你有更好的方法可以实现这种效果，或者有更好的扩展效果，可以留言告诉我，大家一起研究探讨。

zp8497586rq