用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效

今天看到淘宝ued博客上左边的菜单导航动画效果不错，就用jQuery和css3做了一个简单的例子，主要是实现运用了jQuery 事件和css3 transition属性。

用一个元素来实现鼠标滑动到某个导航的背景效果，文字颜色也运用css3 transition 渐变的效果当鼠标滑动其他导航的时候，加背景的元素的top值也会随着变化，定位到当前的导航上，，同时文字字体颜色也会跟着改变； 主要实现的html代码如下：=>=>>=>>=></div>

css样式：

::::::0}, ,:#ff5f3e;outline:0; text-decoration: none;}

js代码

$(menuBox = $(‘div.menuBox’),itemBg = $(‘div.itemBg’,menuBox),_li = $(‘li’,menuBox),_licur = $(‘li.select’,menuBox);//根据默认页面的导航到top设置itemBg的top值itemBg.css(‘top’,(_licur.offset().top-_licur.closest(‘div’).offset().top));_li.on({mouseenter:$this =$(this);itemBg.css({‘top’:($this.offset().top-$this.closest(‘div’).offset().top),’transition-property’:’top’,’transition-duration’: 0.2+’s’});},mouseleave:$this =$(this);itemBg.css({‘top’:(_licur.offset().top-$this.closest(‘div’).offset().top),’transition-property’:’top’,’transition-duration’: 0.2+’s’});}})})

注：考虑到网站性能优化的问题，一般css能实现的样式效果尽量不用js去实现。

demo下载地址：

父母养我不容易，我在学校争口气。