雨夜带刀's Blog

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

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

how can i get my ex girlfriend back

先看看实际效果的演示

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

HTML结构部分:

一个简单的无序列表,但是在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'});
  });
});

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

原载于:雨夜带刀's Blog
本文链接:http://stylechen.com/blue_slide_nav.html
如需转载请以链接形式注明原载或原文地址。
zp8497586rq

“基于jQuery的滑动式动画导航栏”目前已有 5 条评论

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。