前言

今天这篇文章的标题，显然是要搞事情。一个JS交互效果，居然花费了一天的宝贵时间才研究出来，我是不是不太适合做前端？

别急，搬好小板凳，正文从这开始～

本来今天下班回来感觉有点累，想着今天就别学了吧，正好看见停播了好久的《极限挑战》在网上放出了最新的一期。但是，今天发生在公司的一件小事儿，在我心里产生了不小的波澜，正好拿这个话题跟同行们聊聊.....

今天早晨我按时去了公司，坐在我的工位上，习惯性地点开了编辑器SublimeText（我宠幸了它三年之久～），一天的编码工作正式开始。

我的大脑高速运转，回忆了下昨天下班前的进度，以及要修改的bug，一个是替换iconfont字体图标的问题，一个是编写官网首页通用导航栏鼠标hover的交互效果，我估摸着上午先把这两个问题解决了，下午再忙其他的任务。

不一会儿，iconfont的替换工作就完成了。紧接着就是导航栏mouse over 的特效编写，殊不知，就是这个效果，让原本计划上午完成的事情，愣是被我研究了大半天才解决。二话不说，直接上图：

我先给大家说下这里要实现的效果，就是当鼠标移入导航栏的某个栏目时，顶部的4px 的蓝色滑动条要尾随着鼠标，如丝般顺滑地滑入相应栏目的顶部位置，当鼠标leave时，蓝色滑动条要退回到当前current的栏目顶部。

刚开始我的布局是，导航栏是一个ul，ul下面有八个li，分别是八个栏目。在每个li的顶部设置一个border-top: 4px solid #2ea0ff；html结构如下：

我的初步设想是，先隐藏这个border-top，然后当鼠标移入的时候，再显示出来。代码如下：

任何效果都是经过一步一步思考打磨出来的，不可能是一蹴而就。就比如这个例子，学过jQuery的同学都知道，这个效果就是很生硬的显示一条顶部边框，然后隐藏，没有动画的效果。但是jQuery的动画api辣么多，什么slideDown、slideUp、fadeIn、fadeOut、animate......

（默默地给@愚人码头打了个广告）

于是，我对代码进行了第二波改造，加上了动画效果，以下是debug现场重现：

预期的效果在浏览器上渲染出来，此时已经有了动画。但是，这还不是我想要的那个效果，后来我又想了一招，可以在每个li里添加一个span，设置为绝对定位，width默认为0，然后animate的时候，让它过渡到li的宽度。

嗯，这个想法不错，有点接近我心中的那个效果了。于是，我又折腾了一番：

这回终于有点样子了，只不过还是每个li都有一个自己的滑动条，而领导的意思是导航栏顶部只有一条公用的4px的蓝色滑动条，鼠标移入时来回切换。

此时，已将近中午，我debug 的幕后过程其实更加艰辛，不像我现在写文字时那么轻描淡写。而我旁边的同事说，看你折腾来折腾去的，干嘛那么辛苦，去网上找个插件就好了，省时省力。

当时，我只能苦笑，因为前些日子我跟着视频里写过这个例子，不过时间隔的有点久，我自己想不起当时的逻辑了。

下午又研究了大半天，突然灵光一现，想到了一招，可以在ul的外层包一层div，和ul同级新增一个span元素，这个span就是那个公用的蓝色滑动条。然后给父元素设置为相对位置，给span设置为绝对位置。然后根据鼠标移入的li的索引，计算出span要滑动的距离，这个距离就等于li的width乘以移入li的index的值，再加上每个li之间的间距。还是赶紧贴上html结构：

中途因为li的index索引停滞了好一阵子，因为index值取不到。于是，我又用原生javascript写了一遍，还是取不到值，然后又改回来jquery的写法。在经过多次翻阅jquery的api文档，多次试错之后，终于效果写出来了，以下是最终的业务代码：