滑动门里 LavaLamp 可以算应用广泛使用也比较容易的jQuery插件了。
昨晚 @万戈 童鞋写了篇滑动，jQuery部分看了尝试精简了下，还真成了：DEMO
折腾完之后受此启发，有了码一个 LavaLamp 效果的基本思路，刚又整理完善了下基本搞定完成。
html结构部分，WordPress自定义导航生成，已去除无关代码

<ul id="menu-menu">
     
    <li class="current-menu-item"><a>首页</a></li>
     
    <li class=""><a>折腾</a></li>
     
    <li class=""><a>生活</a></li>
     
</ul>

css部分，其中huad里的样式就是滑动的那块样式，高度什么的得自行调整：

#menu-menu{position:relative;}
    
#menu-menu li a{position:relative;z-index:2;}
    
#menu-menu .huad{height:30px;border-top:2px solid #1BA1E2;border-bottom:2px solid #1BA1E2;position:absolute;top:0px;z-index:1;}

jQuery核心代码：

//By ImMmMm.com
   
var mm=$('#menu-menu');  //一般只需修改这儿的ID
   
var mmc=mm.find('.current-menu-item');  //获取需要高亮的对象，current-menu-item为WordPress自定义导航生成
   
var mml=mmc.position().left;  //高亮对象相对父级元素的左边距
   
var mmw=mmc.width();  //获取高亮对象的宽度
   
mm.append("<li class='huad' style='left:"+mml+"px;width:"+mmw+"px'></li>");  //追加滑动样式的html代码，并设定宽度和左边距
   
var mmh=mm.find('.huad');  //获取滑动对象
   
mm.children('li').hover(function(){  //此导航下li鼠标移上去的事件
   
    var anm=$(this).position().left;  //此子项相对父级元素的左边距
   
    var anw=$(this).width();  //此子项的宽度
   
    mmh.animate({left:anm,width:anw},{queue:false,duration:300});  //滑动对象左边距和宽度的自定义动画，300毫秒内触发一次
   
    },function(){  //鼠标移开事件
   
    mmh.animate({left:mml,width:mmw},{queue:false,duration:300});  //滑回
   
});

用.position()相对父级元素获取左边距，完美解决浏览器滚动条影响之前.offset()相对浏览器的左边距问题～
PS：效果可能需要强制刷新下才能见到，关于文章页没效果，这个也好理解，jQuery是判断WordPress自定义导航有current-menu-item高亮时才匹配的，So...
转自http://immmmm.com/lavalamp-sliding-effect-by-jquery.html